API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 31st, 2017
532
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.84 KB | None | 0 0
raw download clone embed print report
  1. <div class="animated fadeIn">
  2. <div class="row">
  3. <div class="col-sm-6 col-lg-3">
  4. <div class="card text-white bg-primary">
  5. <div class="card-body pb-0">
  6. <div class="btn-group float-right" dropdown>
  7. <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
  8. <i class="icon-settings"></i>
  9. </button>
  10. <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
  11. <a class="dropdown-item" href="#">Action</a>
  12. <a class="dropdown-item" href="#">Another action</a>
  13. <a class="dropdown-item" href="#">Something else here</a>
  14. </div>
  15. </div>
  16. <h4 class="mb-0">9.823</h4>
  17. <p>Members online</p>
  18. </div>
  19. <div class="chart-wrapper px-3" style="height:70px;">
  20. <canvas baseChart class="chart"
  21. [datasets]="lineChart1Data"
  22. [labels]="lineChart1Labels"
  23. [options]="lineChart1Options"
  24. [colors]="lineChart1Colours"
  25. [legend]="lineChart1Legend"
  26. [chartType]="lineChart1Type"
  27. (chartHover)="chartHovered($event)"
  28. (chartClick)="chartClicked($event)"></canvas>
  29. </div>
  30. </div>
  31. </div><!--/.col-->
  32. <div class="col-sm-6 col-lg-3">
  33. <div class="card text-white bg-info">
  34. <div class="card-body pb-0">
  35. <button type="button" class="btn btn-transparent p-0 float-right">
  36. <i class="icon-location-pin"></i>
  37. </button>
  38. <h4 class="mb-0">9.823</h4>
  39. <p>Members online</p>
  40. </div>
  41. <div class="chart-wrapper px-3" style="height:70px;">
  42. <canvas baseChart class="chart"
  43. [datasets]="lineChart2Data"
  44. [labels]="lineChart2Labels"
  45. [options]="lineChart2Options"
  46. [colors]="lineChart2Colours"
  47. [legend]="lineChart2Legend"
  48. [chartType]="lineChart2Type"
  49. (chartHover)="chartHovered($event)"
  50. (chartClick)="chartClicked($event)"></canvas>
  51. </div>
  52. </div>
  53. </div><!--/.col-->
  54. <div class="col-sm-6 col-lg-3">
  55. <div class="card text-white bg-warning">
  56. <div class="card-body pb-0">
  57. <div class="btn-group float-right" dropdown>
  58. <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
  59. <i class="icon-settings"></i>
  60. </button>
  61. <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
  62. <a class="dropdown-item" href="#">Action</a>
  63. <a class="dropdown-item" href="#">Another action</a>
  64. <a class="dropdown-item" href="#">Something else here</a>
  65. </div>
  66. </div>
  67. <h4 class="mb-0">9.823</h4>
  68. <p>Members online</p>
  69. </div>
  70. <div class="chart-wrapper" style="height:70px;">
  71. <canvas baseChart class="chart"
  72. [datasets]="lineChart3Data"
  73. [labels]="lineChart3Labels"
  74. [options]="lineChart3Options"
  75. [colors]="lineChart3Colours"
  76. [legend]="lineChart3Legend"
  77. [chartType]="lineChart3Type"
  78. (chartHover)="chartHovered($event)"
  79. (chartClick)="chartClicked($event)"></canvas>
  80. </div>
  81. </div>
  82. </div><!--/.col-->
  83. <div class="col-sm-6 col-lg-3">
  84. <div class="card text-white bg-danger">
  85. <div class="card-body pb-0">
  86. <div class="btn-group float-right" dropdown>
  87. <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
  88. <i class="icon-settings"></i>
  89. </button>
  90. <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
  91. <a class="dropdown-item" href="#">Action</a>
  92. <a class="dropdown-item" href="#">Another action</a>
  93. <a class="dropdown-item" href="#">Something else here</a>
  94. </div>
  95. </div>
  96. <h4 class="mb-0">9.823</h4>
  97. <p>Members online</p>
  98. </div>
  99. <div class="chart-wrapper px-3" style="height:70px;">
  100. <canvas baseChart class="chart"
  101. [datasets]="barChart1Data"
  102. [labels]="barChart1Labels"
  103. [options]="barChart1Options"
  104. [colors]="barChart1Colours"
  105. [legend]="barChart1Legend"
  106. [chartType]="barChart1Type"
  107. (chartHover)="chartHovered($event)"
  108. (chartClick)="chartClicked($event)"></canvas>
  109. </div>
  110. </div>
  111. </div><!--/.col-->
  112. </div><!--/.row-->
  113. <div class="card">
  114. <div class="card-body">
  115. <div class="row">
  116. <div class="col-sm-5">
  117. <h4 class="card-title mb-0">Traffic</h4>
  118. <div class="small text-muted">November 2015</div>
  119. </div><!--/.col-->
  120. <div class="col-sm-7 hidden-sm-down">
  121. <button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
  122. <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
  123. <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
  124. <label class="btn btn-outline-secondary">
  125. <input type="radio" name="options" id="option1"> Day
  126. </label>
  127. <label class="btn btn-outline-secondary active">
  128. <input type="radio" name="options" id="option2" checked> Month
  129. </label>
  130. <label class="btn btn-outline-secondary">
  131. <input type="radio" name="options" id="option3"> Year
  132. </label>
  133. </div>
  134. </div>
  135. </div><!--/.col-->
  136. </div><!--/.row-->
  137. <div class="chart-wrapper" style="height:300px;margin-top:40px;">
  138. <canvas baseChart class="chart"
  139. [datasets]="mainChartData"
  140. [labels]="mainChartLabels"
  141. [options]="mainChartOptions"
  142. [colors]="mainChartColours"
  143. [legend]="mainChartLegend"
  144. [chartType]="mainChartType"
  145. (chartHover)="chartHovered($event)"
  146. (chartClick)="chartClicked($event)"></canvas>
  147. </div>
  148. </div>
  149. <div class="card-footer">
  150. <ul>
  151. <li>
  152. <div class="text-muted">Visits</div>
  153. <strong>29.703 Users (40%)</strong>
  154. <div class="progress progress-xs mt-2">
  155. <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  156. </div>
  157. </li>
  158. <li class="hidden-sm-down">
  159. <div class="text-muted">Unique</div>
  160. <strong>24.093 Users (20%)</strong>
  161. <div class="progress progress-xs mt-2">
  162. <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  163. </div>
  164. </li>
  165. <li>
  166. <div class="text-muted">Pageviews</div>
  167. <strong>78.706 Views (60%)</strong>
  168. <div class="progress progress-xs mt-2">
  169. <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
  170. </div>
  171. </li>
  172. <li class="hidden-sm-down">
  173. <div class="text-muted">New Users</div>
  174. <strong>22.123 Users (80%)</strong>
  175. <div class="progress progress-xs mt-2">
  176. <div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
  177. </div>
  178. </li>
  179. <li class="hidden-sm-down">
  180. <div class="text-muted">Bounce Rate</div>
  181. <strong>40.15%</strong>
  182. <div class="progress progress-xs mt-2">
  183. <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  184. </div>
  185. </li>
  186. </ul>
  187. </div>
  188. </div>
  189. <!--/.card-->
  190. <div class="row">
  191. <div class="col-sm-6 col-lg-3">
  192. <div class="social-box facebook">
  193. <i class="fa fa-facebook"></i>
  194. <div class="chart-wrapper">
  195. <canvas baseChart class="chart"
  196. [datasets]="socialChartData1"
  197. [labels]="socialChartLabels"
  198. [options]="socialChartOptions"
  199. [colors]="socialChartColours"
  200. [legend]="socialChartLegend"
  201. [chartType]="socialChartType"
  202. (chartHover)="chartHovered($event)"
  203. (chartClick)="chartClicked($event)"></canvas>
  204. </div>
  205. <ul>
  206. <li>
  207. <strong>89k</strong>
  208. <span>friends</span>
  209. </li>
  210. <li>
  211. <strong>459</strong>
  212. <span>feeds</span>
  213. </li>
  214. </ul>
  215. </div>
  216. <!--/.social-box-->
  217. </div><!--/.col-->
  218. <div class="col-sm-6 col-lg-3">
  219. <div class="social-box twitter">
  220. <i class="fa fa-twitter"></i>
  221. <div class="chart-wrapper">
  222. <canvas baseChart class="chart"
  223. [datasets]="socialChartData2"
  224. [labels]="socialChartLabels"
  225. [options]="socialChartOptions"
  226. [colors]="socialChartColours"
  227. [legend]="socialChartLegend"
  228. [chartType]="socialChartType"
  229. (chartHover)="chartHovered($event)"
  230. (chartClick)="chartClicked($event)"></canvas>
  231. </div>
  232. <ul>
  233. <li>
  234. <strong>973k</strong>
  235. <span>followers</span>
  236. </li>
  237. <li>
  238. <strong>1.792</strong>
  239. <span>tweets</span>
  240. </li>
  241. </ul>
  242. </div>
  243. <!--/.social-box-->
  244. </div><!--/.col-->
  245. <div class="col-sm-6 col-lg-3">
  246. <div class="social-box linkedin">
  247. <i class="fa fa-linkedin"></i>
  248. <div class="chart-wrapper">
  249. <canvas baseChart class="chart"
  250. [datasets]="socialChartData3"
  251. [labels]="socialChartLabels"
  252. [options]="socialChartOptions"
  253. [colors]="socialChartColours"
  254. [legend]="socialChartLegend"
  255. [chartType]="socialChartType"
  256. (chartHover)="chartHovered($event)"
  257. (chartClick)="chartClicked($event)"></canvas>
  258. </div>
  259. <ul>
  260. <li>
  261. <strong>500+</strong>
  262. <span>contacts</span>
  263. </li>
  264. <li>
  265. <strong>292</strong>
  266. <span>feeds</span>
  267. </li>
  268. </ul>
  269. </div>
  270. <!--/.social-box-->
  271. </div><!--/.col-->
  272. <div class="col-sm-6 col-lg-3">
  273. <div class="social-box google-plus">
  274. <i class="fa fa-google-plus"></i>
  275. <div class="chart-wrapper">
  276. <canvas baseChart class="chart"
  277. [datasets]="socialChartData4"
  278. [labels]="socialChartLabels"
  279. [options]="socialChartOptions"
  280. [colors]="socialChartColours"
  281. [legend]="socialChartLegend"
  282. [chartType]="socialChartType"
  283. (chartHover)="chartHovered($event)"
  284. (chartClick)="chartClicked($event)"></canvas>
  285. </div>
  286. <ul>
  287. <li>
  288. <strong>894</strong>
  289. <span>followers</span>
  290. </li>
  291. <li>
  292. <strong>92</strong>
  293. <span>circles</span>
  294. </li>
  295. </ul>
  296. </div>
  297. <!--/.social-box-->
  298. </div><!--/.col-->
  299. </div><!--/.row-->
  300. <div class="row">
  301. <div class="col-md-12">
  302. <div class="card">
  303. <div class="card-header">
  304. Traffic & Sales
  305. </div>
  306. <div class="card-body">
  307. <div class="row">
  308. <div class="col-sm-12 col-lg-4">
  309. <div class="row">
  310. <div class="col-sm-6">
  311. <div class="callout callout-info">
  312. <small class="text-muted">New Clients</small>
  313. <br>
  314. <strong class="h4">9,123</strong>
  315. <div class="chart-wrapper" style="width:100px;height:30px;">
  316. <canvas baseChart class="chart"
  317. [datasets]="sparklineChartData1"
  318. [labels]="sparklineChartLabels"
  319. [options]="sparklineChartOptions"
  320. [colors]="sparklineChartInfo"
  321. [legend]="sparklineChartLegend"
  322. [chartType]="sparklineChartType"
  323. (chartHover)="chartHovered($event)"
  324. (chartClick)="chartClicked($event)"></canvas>
  325. </div>
  326. </div>
  327. </div><!--/.col-->
  328. <div class="col-sm-6">
  329. <div class="callout callout-danger">
  330. <small class="text-muted">Recuring Clients</small>
  331. <br>
  332. <strong class="h4">22,643</strong>
  333. <div class="chart-wrapper" style="width:100px;height:30px;">
  334. <canvas baseChart class="chart"
  335. [datasets]="sparklineChartData2"
  336. [labels]="sparklineChartLabels"
  337. [options]="sparklineChartOptions"
  338. [colors]="sparklineChartDanger"
  339. [legend]="sparklineChartLegend"
  340. [chartType]="sparklineChartType"
  341. (chartHover)="chartHovered($event)"
  342. (chartClick)="chartClicked($event)"></canvas>
  343. </div>
  344. </div>
  345. </div><!--/.col-->
  346. </div><!--/.row-->
  347. <hr class="mt-0">
  348. <ul class="horizontal-bars">
  349. <li>
  350. <div class="title">
  351. Monday
  352. </div>
  353. <div class="bars">
  354. <div class="progress progress-xs">
  355. <div class="progress-bar bg-info" role="progressbar" style="width: 34%" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
  356. </div>
  357. <div class="progress progress-xs">
  358. <div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
  359. </div>
  360. </div>
  361. </li>
  362. <li>
  363. <div class="title">
  364. Tuesday
  365. </div>
  366. <div class="bars">
  367. <div class="progress progress-xs">
  368. <div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
  369. </div>
  370. <div class="progress progress-xs">
  371. <div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
  372. </div>
  373. </div>
  374. </li>
  375. <li>
  376. <div class="title">
  377. Wednesday
  378. </div>
  379. <div class="bars">
  380. <div class="progress progress-xs">
  381. <div class="progress-bar bg-info" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
  382. </div>
  383. <div class="progress progress-xs">
  384. <div class="progress-bar bg-danger" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
  385. </div>
  386. </div>
  387. </li>
  388. <li>
  389. <div class="title">
  390. Thursday
  391. </div>
  392. <div class="bars">
  393. <div class="progress progress-xs">
  394. <div class="progress-bar bg-info" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
  395. </div>
  396. <div class="progress progress-xs">
  397. <div class="progress-bar bg-danger" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"></div>
  398. </div>
  399. </div>
  400. </li>
  401. <li>
  402. <div class="title">
  403. Friday
  404. </div>
  405. <div class="bars">
  406. <div class="progress progress-xs">
  407. <div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
  408. </div>
  409. <div class="progress progress-xs">
  410. <div class="progress-bar bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
  411. </div>
  412. </div>
  413. </li>
  414. <li>
  415. <div class="title">
  416. Saturday
  417. </div>
  418. <div class="bars">
  419. <div class="progress progress-xs">
  420. <div class="progress-bar bg-info" role="progressbar" style="width: 53%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
  421. </div>
  422. <div class="progress progress-xs">
  423. <div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
  424. </div>
  425. </div>
  426. </li>
  427. <li>
  428. <div class="title">
  429. Sunday
  430. </div>
  431. <div class="bars">
  432. <div class="progress progress-xs">
  433. <div class="progress-bar bg-info" role="progressbar" style="width: 9%" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
  434. </div>
  435. <div class="progress progress-xs">
  436. <div class="progress-bar bg-danger" role="progressbar" style="width: 69%" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
  437. </div>
  438. </div>
  439. </li>
  440. <li class="legend">
  441. <span class="badge badge-pill badge-info"></span> <small>New clients</small> &nbsp; <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
  442. </li>
  443. </ul>
  444. </div><!--/.col-->
  445. <div class="col-sm-6 col-lg-4">
  446. <div class="row">
  447. <div class="col-sm-6">
  448. <div class="callout callout-warning">
  449. <small class="text-muted">Pageviews</small>
  450. <br>
  451. <strong class="h4">78,623</strong>
  452. <div class="chart-wrapper" style="width:100px;height:30px;">
  453. <canvas baseChart class="chart"
  454. [datasets]="sparklineChartData1"
  455. [labels]="sparklineChartLabels"
  456. [options]="sparklineChartOptions"
  457. [colors]="sparklineChartWarning"
  458. [legend]="sparklineChartLegend"
  459. [chartType]="sparklineChartType"
  460. (chartHover)="chartHovered($event)"
  461. (chartClick)="chartClicked($event)"></canvas>
  462. </div>
  463. </div>
  464. </div><!--/.col-->
  465. <div class="col-sm-6">
  466. <div class="callout callout-success">
  467. <small class="text-muted">Organic</small>
  468. <br>
  469. <strong class="h4">49,123</strong>
  470. <div class="chart-wrapper" style="width:100px;height:30px;">
  471. <canvas baseChart class="chart"
  472. [datasets]="sparklineChartData2"
  473. [labels]="sparklineChartLabels"
  474. [options]="sparklineChartOptions"
  475. [colors]="sparklineChartSuccess"
  476. [legend]="sparklineChartLegend"
  477. [chartType]="sparklineChartType"
  478. (chartHover)="chartHovered($event)"
  479. (chartClick)="chartClicked($event)"></canvas>
  480. </div>
  481. </div>
  482. </div><!--/.col-->
  483. </div><!--/.row-->
  484. <hr class="mt-0">
  485. <ul class="horizontal-bars type-2">
  486. <li>
  487. <i class="icon-user"></i>
  488. <span class="title">Male</span>
  489. <span class="value">43%</span>
  490. <div class="bars">
  491. <div class="progress progress-xs">
  492. <div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
  493. </div>
  494. </div>
  495. </li>
  496. <li>
  497. <i class="icon-user-female"></i>
  498. <span class="title">Female</span>
  499. <span class="value">37%</span>
  500. <div class="bars">
  501. <div class="progress progress-xs">
  502. <div class="progress-bar bg-warning" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
  503. </div>
  504. </div>
  505. </li>
  506. <li class="divider"></li>
  507. <li>
  508. <i class="icon-globe"></i>
  509. <span class="title">Organic Search</span>
  510. <span class="value">191,235 <span class="text-muted small">(56%)</span></span>
  511. <div class="bars">
  512. <div class="progress progress-xs">
  513. <div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
  514. </div>
  515. </div>
  516. </li>
  517. <li>
  518. <i class="icon-social-facebook"></i>
  519. <span class="title">Facebook</span>
  520. <span class="value">51,223 <span class="text-muted small">(15%)</span></span>
  521. <div class="bars">
  522. <div class="progress progress-xs">
  523. <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  524. </div>
  525. </div>
  526. </li>
  527. <li>
  528. <i class="icon-social-twitter"></i>
  529. <span class="title">Twitter</span>
  530. <span class="value">37,564 <span class="text-muted small">(11%)</span></span>
  531. <div class="bars">
  532. <div class="progress progress-xs">
  533. <div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
  534. </div>
  535. </div>
  536. </li>
  537. <li>
  538. <i class="icon-social-linkedin"></i>
  539. <span class="title">LinkedIn</span>
  540. <span class="value">27,319 <span class="text-muted small">(8%)</span></span>
  541. <div class="bars">
  542. <div class="progress progress-xs">
  543. <div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
  544. </div>
  545. </div>
  546. </li>
  547. <li class="divider text-center">
  548. <button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="" data-original-title="show more"><i class="icon-options"></i></button>
  549. </li>
  550. </ul>
  551. </div><!--/.col-->
  552. <div class="col-sm-6 col-lg-4">
  553. <div class="row">
  554. <div class="col-sm-6">
  555. <div class="callout">
  556. <small class="text-muted">CTR</small>
  557. <br>
  558. <strong class="h4">23%</strong>
  559. <div class="chart-wrapper" style="width:100px;height:30px;">
  560. <canvas baseChart class="chart"
  561. [datasets]="sparklineChartData1"
  562. [labels]="sparklineChartLabels"
  563. [options]="sparklineChartOptions"
  564. [colors]="sparklineChartDefault"
  565. [legend]="sparklineChartLegend"
  566. [chartType]="sparklineChartType"
  567. (chartHover)="chartHovered($event)"
  568. (chartClick)="chartClicked($event)"></canvas>
  569. </div>
  570. </div>
  571. </div><!--/.col-->
  572. <div class="col-sm-6">
  573. <div class="callout callout-primary">
  574. <small class="text-muted">Bounce Rate</small>
  575. <br>
  576. <strong class="h4">5%</strong>
  577. <div class="chart-wrapper" style="width:100px;height:30px;">
  578. <canvas baseChart class="chart"
  579. [datasets]="sparklineChartData2"
  580. [labels]="sparklineChartLabels"
  581. [options]="sparklineChartOptions"
  582. [colors]="sparklineChartPrimary"
  583. [legend]="sparklineChartLegend"
  584. [chartType]="sparklineChartType"
  585. (chartHover)="chartHovered($event)"
  586. (chartClick)="chartClicked($event)"></canvas>
  587. </div>
  588. </div>
  589. </div><!--/.col-->
  590. </div><!--/.row-->
  591. <hr class="mt-0">
  592. <ul class="icons-list">
  593. <li>
  594. <i class="icon-screen-desktop bg-primary"></i>
  595. <div class="desc">
  596. <div class="title">iMac 4k</div>
  597. <small>Lorem ipsum dolor sit amet</small>
  598. </div>
  599. <div class="value">
  600. <div class="small text-muted">Sold this week</div>
  601. <strong>1.924</strong>
  602. </div>
  603. <div class="actions">
  604. <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
  605. </div>
  606. </li>
  607. <li>
  608. <i class="icon-screen-smartphone bg-info"></i>
  609. <div class="desc">
  610. <div class="title">Samsung Galaxy Edge</div>
  611. <small>Lorem ipsum dolor sit amet</small>
  612. </div>
  613. <div class="value">
  614. <div class="small text-muted">Sold this week</div>
  615. <strong>1.224</strong>
  616. </div>
  617. <div class="actions">
  618. <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
  619. </div>
  620. </li>
  621. <li>
  622. <i class="icon-screen-smartphone bg-warning"></i>
  623. <div class="desc">
  624. <div class="title">iPhone 6S</div>
  625. <small>Lorem ipsum dolor sit amet</small>
  626. </div>
  627. <div class="value">
  628. <div class="small text-muted">Sold this week</div>
  629. <strong>1.163</strong>
  630. </div>
  631. <div class="actions">
  632. <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
  633. </div>
  634. </li>
  635. <li>
  636. <i class="icon-user bg-danger"></i>
  637. <div class="desc">
  638. <div class="title">Premium accounts</div>
  639. <small>Lorem ipsum dolor sit amet</small>
  640. </div>
  641. <div class="value">
  642. <div class="small text-muted">Sold this week</div>
  643. <strong>928</strong>
  644. </div>
  645. <div class="actions">
  646. <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
  647. </div>
  648. </li>
  649. <li>
  650. <i class="icon-social-spotify bg-success"></i>
  651. <div class="desc">
  652. <div class="title">Spotify Subscriptions</div>
  653. <small>Lorem ipsum dolor sit amet</small>
  654. </div>
  655. <div class="value">
  656. <div class="small text-muted">Sold this week</div>
  657. <strong>893</strong>
  658. </div>
  659. <div class="actions">
  660. <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
  661. </div>
  662. </li>
  663. <li>
  664. <i class="icon-cloud-download bg-danger"></i>
  665. <div class="desc">
  666. <div class="title">Ebook</div>
  667. <small>Lorem ipsum dolor sit amet</small>
  668. </div>
  669. <div class="value">
  670. <div class="small text-muted">Downloads</div>
  671. <strong>121.924</strong>
  672. </div>
  673. <div class="actions">
  674. <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
  675. </div>
  676. </li>
  677. <li>
  678. <i class="icon-camera bg-warning"></i>
  679. <div class="desc">
  680. <div class="title">Photos</div>
  681. <small>Lorem ipsum dolor sit amet</small>
  682. </div>
  683. <div class="value">
  684. <div class="small text-muted">Uploaded</div>
  685. <strong>12.125</strong>
  686. </div>
  687. <div class="actions">
  688. <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
  689. </div>
  690. </li>
  691. <li class="divider text-center">
  692. <button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="show more"><i class="icon-options"></i></button>
  693. </li>
  694. </ul>
  695. </div><!--/.col-->
  696. </div><!--/.row-->
  697. <br>
  698. <div class="table-responsive"></div>
  699. <table class="table table-responsive table-hover table-outline mb-0">
  700. <thead class="thead-default">
  701. <tr>
  702. <th class="text-center"><i class="icon-people"></i></th>
  703. <th>User</th>
  704. <th class="text-center">Country</th>
  705. <th>Usage</th>
  706. <th class="text-center">Payment Method</th>
  707. <th>Activity</th>
  708. </tr>
  709. </thead>
  710. <tbody>
  711. <tr>
  712. <td class="text-center">
  713. <div class="avatar">
  714. <img src="assets/img/avatars/1.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/1.jpg">
  715. <span class="avatar-status badge-success"></span>
  716. </div>
  717. </td>
  718. <td>
  719. <div>Yiorgos Avraamu</div>
  720. <div class="small text-muted">
  721. <span>New</span> | Registered: Jan 1, 2015
  722. </div>
  723. </td>
  724. <td class="text-center">
  725. <img src="assets/img/flags/USA.png" alt="USA" style="height:24px;" src="assets/img/flags/USA.png">
  726. </td>
  727. <td>
  728. <div class="clearfix">
  729. <div class="float-left">
  730. <strong>50%</strong>
  731. </div>
  732. <div class="float-right">
  733. <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
  734. </div>
  735. </div>
  736. <div class="progress progress-xs">
  737. <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  738. </div>
  739. </td>
  740. <td class="text-center">
  741. <i class="fa fa-cc-mastercard" style="font-size:24px"></i>
  742. </td>
  743. <td>
  744. <div class="small text-muted">Last login</div>
  745. <strong>10 sec ago</strong>
  746. </td>
  747. </tr>
  748. <tr>
  749. <td class="text-center">
  750. <div class="avatar">
  751. <img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/2.jpg">
  752. <span class="avatar-status badge-danger"></span>
  753. </div>
  754. </td>
  755. <td>
  756. <div>Avram Tarasios</div>
  757. <div class="small text-muted">
  758.  
  759. <span>Recurring</span> | Registered: Jan 1, 2015
  760. </div>
  761. </td>
  762. <td class="text-center">
  763. <img src="assets/img/flags/Brazil.png" alt="Brazil" style="height:24px;" src="assets/img/flags/Brazil.png">
  764. </td>
  765. <td>
  766. <div class="clearfix">
  767. <div class="float-left">
  768. <strong>10%</strong>
  769. </div>
  770. <div class="float-right">
  771. <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
  772. </div>
  773. </div>
  774. <div class="progress progress-xs">
  775. <div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  776. </div>
  777. </td>
  778. <td class="text-center">
  779. <i class="fa fa-cc-visa" style="font-size:24px"></i>
  780. </td>
  781. <td>
  782. <div class="small text-muted">Last login</div>
  783. <strong>5 minutes ago</strong>
  784. </td>
  785. </tr>
  786. <tr>
  787. <td class="text-center">
  788. <div class="avatar">
  789. <img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/3.jpg">
  790. <span class="avatar-status badge-warning"></span>
  791. </div>
  792. </td>
  793. <td>
  794. <div>Quintin Ed</div>
  795. <div class="small text-muted">
  796. <span>New</span> | Registered: Jan 1, 2015
  797. </div>
  798. </td>
  799. <td class="text-center">
  800. <img src="assets/img/flags/India.png" alt="India" style="height:24px;" src="assets/img/flags/India.png">
  801. </td>
  802. <td>
  803. <div class="clearfix">
  804. <div class="float-left">
  805. <strong>74%</strong>
  806. </div>
  807. <div class="float-right">
  808. <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
  809. </div>
  810. </div>
  811. <div class="progress progress-xs">
  812. <div class="progress-bar bg-warning" role="progressbar" style="width: 74%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
  813. </div>
  814. </td>
  815. <td class="text-center">
  816. <i class="fa fa-cc-stripe" style="font-size:24px"></i>
  817. </td>
  818. <td>
  819. <div class="small text-muted">Last login</div>
  820. <strong>1 hour ago</strong>
  821. </td>
  822. </tr>
  823. <tr>
  824. <td class="text-center">
  825. <div class="avatar">
  826. <img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/4.jpg">
  827. <span class="avatar-status badge-default"></span>
  828. </div>
  829. </td>
  830. <td>
  831. <div>Enéas Kwadwo</div>
  832. <div class="small text-muted">
  833. <span>New</span> | Registered: Jan 1, 2015
  834. </div>
  835. </td>
  836. <td class="text-center">
  837. <img src="assets/img/flags/France.png" alt="France" style="height:24px;" src="assets/img/flags/France.png">
  838. </td>
  839. <td>
  840. <div class="clearfix">
  841. <div class="float-left">
  842. <strong>98%</strong>
  843. </div>
  844. <div class="float-right">
  845. <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
  846. </div>
  847. </div>
  848. <div class="progress progress-xs">
  849. <div class="progress-bar bg-danger" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
  850. </div>
  851. </td>
  852. <td class="text-center">
  853. <i class="fa fa-paypal" style="font-size:24px"></i>
  854. </td>
  855. <td>
  856. <div class="small text-muted">Last login</div>
  857. <strong>Last month</strong>
  858. </td>
  859. </tr>
  860. <tr>
  861. <td class="text-center">
  862. <div class="avatar">
  863. <img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/5.jpg">
  864. <span class="avatar-status badge-success"></span>
  865. </div>
  866. </td>
  867. <td>
  868. <div>Agapetus Tadeáš</div>
  869. <div class="small text-muted">
  870. <span>New</span> | Registered: Jan 1, 2015
  871. </div>
  872. </td>
  873. <td class="text-center">
  874. <img src="assets/img/flags/Spain.png" alt="Spain" style="height:24px;" src="assets/img/flags/Spain.png">
  875. </td>
  876. <td>
  877. <div class="clearfix">
  878. <div class="float-left">
  879. <strong>22%</strong>
  880. </div>
  881. <div class="float-right">
  882. <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
  883. </div>
  884. </div>
  885. <div class="progress progress-xs">
  886. <div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
  887. </div>
  888. </td>
  889. <td class="text-center">
  890. <i class="fa fa-google-wallet" style="font-size:24px"></i>
  891. </td>
  892. <td>
  893. <div class="small text-muted">Last login</div>
  894. <strong>Last week</strong>
  895. </td>
  896. </tr>
  897. <tr>
  898. <td class="text-center">
  899. <div class="avatar">
  900. <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/6.jpg">
  901. <span class="avatar-status badge-danger"></span>
  902. </div>
  903. </td>
  904. <td>
  905. <div>Friderik Dávid</div>
  906. <div class="small text-muted">
  907. <span>New</span> | Registered: Jan 1, 2015
  908. </div>
  909. </td>
  910. <td class="text-center">
  911. <img src="assets/img/flags/Poland.png" alt="Poland" style="height:24px;" src="assets/img/flags/Poland.png">
  912. </td>
  913. <td>
  914. <div class="clearfix">
  915. <div class="float-left">
  916. <strong>43%</strong>
  917. </div>
  918. <div class="float-right">
  919. <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
  920. </div>
  921. </div>
  922. <div class="progress progress-xs">
  923. <div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
  924. </div>
  925. </td>
  926. <td class="text-center">
  927. <i class="fa fa-cc-amex" style="font-size:24px"></i>
  928. </td>
  929. <td>
  930. <div class="small text-muted">Last login</div>
  931. <strong>Yesterday</strong>
  932. </td>
  933. </tr>
  934. </tbody>
  935. </table>
  936. </div>
  937. </div>
  938. </div><!--/.col-->
  939. </div><!--/.row-->
  940. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!