invoice.html 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>AdminLTE 3 | Invoice</title>
  7. <!-- Google Font: Source Sans Pro -->
  8. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  9. <!-- Font Awesome -->
  10. <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  11. <!-- Theme style -->
  12. <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  13. </head>
  14. <body class="hold-transition sidebar-mini">
  15. <div class="wrapper">
  16. <!-- Navbar -->
  17. <nav class="main-header navbar navbar-expand navbar-white navbar-light">
  18. <!-- Left navbar links -->
  19. <ul class="navbar-nav">
  20. <li class="nav-item">
  21. <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
  22. </li>
  23. <li class="nav-item d-none d-sm-inline-block">
  24. <a href="../../index3.html" class="nav-link">Home</a>
  25. </li>
  26. <li class="nav-item d-none d-sm-inline-block">
  27. <a href="#" class="nav-link">Contact</a>
  28. </li>
  29. </ul>
  30. <!-- Right navbar links -->
  31. <ul class="navbar-nav ml-auto">
  32. <!-- Navbar Search -->
  33. <li class="nav-item">
  34. <a class="nav-link" data-widget="navbar-search" href="#" role="button">
  35. <i class="fas fa-search"></i>
  36. </a>
  37. <div class="navbar-search-block">
  38. <form class="form-inline">
  39. <div class="input-group input-group-sm">
  40. <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
  41. <div class="input-group-append">
  42. <button class="btn btn-navbar" type="submit">
  43. <i class="fas fa-search"></i>
  44. </button>
  45. <button class="btn btn-navbar" type="button" data-widget="navbar-search">
  46. <i class="fas fa-times"></i>
  47. </button>
  48. </div>
  49. </div>
  50. </form>
  51. </div>
  52. </li>
  53. <!-- Messages Dropdown Menu -->
  54. <li class="nav-item dropdown">
  55. <a class="nav-link" data-toggle="dropdown" href="#">
  56. <i class="far fa-comments"></i>
  57. <span class="badge badge-danger navbar-badge">3</span>
  58. </a>
  59. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  60. <a href="#" class="dropdown-item">
  61. <!-- Message Start -->
  62. <div class="media">
  63. <img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
  64. <div class="media-body">
  65. <h3 class="dropdown-item-title">
  66. Brad Diesel
  67. <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
  68. </h3>
  69. <p class="text-sm">Call me whenever you can...</p>
  70. <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  71. </div>
  72. </div>
  73. <!-- Message End -->
  74. </a>
  75. <div class="dropdown-divider"></div>
  76. <a href="#" class="dropdown-item">
  77. <!-- Message Start -->
  78. <div class="media">
  79. <img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
  80. <div class="media-body">
  81. <h3 class="dropdown-item-title">
  82. John Pierce
  83. <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
  84. </h3>
  85. <p class="text-sm">I got your message bro</p>
  86. <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  87. </div>
  88. </div>
  89. <!-- Message End -->
  90. </a>
  91. <div class="dropdown-divider"></div>
  92. <a href="#" class="dropdown-item">
  93. <!-- Message Start -->
  94. <div class="media">
  95. <img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
  96. <div class="media-body">
  97. <h3 class="dropdown-item-title">
  98. Nora Silvester
  99. <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
  100. </h3>
  101. <p class="text-sm">The subject goes here</p>
  102. <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  103. </div>
  104. </div>
  105. <!-- Message End -->
  106. </a>
  107. <div class="dropdown-divider"></div>
  108. <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
  109. </div>
  110. </li>
  111. <!-- Notifications Dropdown Menu -->
  112. <li class="nav-item dropdown">
  113. <a class="nav-link" data-toggle="dropdown" href="#">
  114. <i class="far fa-bell"></i>
  115. <span class="badge badge-warning navbar-badge">15</span>
  116. </a>
  117. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  118. <span class="dropdown-item dropdown-header">15 Notifications</span>
  119. <div class="dropdown-divider"></div>
  120. <a href="#" class="dropdown-item">
  121. <i class="fas fa-envelope mr-2"></i> 4 new messages
  122. <span class="float-right text-muted text-sm">3 mins</span>
  123. </a>
  124. <div class="dropdown-divider"></div>
  125. <a href="#" class="dropdown-item">
  126. <i class="fas fa-users mr-2"></i> 8 friend requests
  127. <span class="float-right text-muted text-sm">12 hours</span>
  128. </a>
  129. <div class="dropdown-divider"></div>
  130. <a href="#" class="dropdown-item">
  131. <i class="fas fa-file mr-2"></i> 3 new reports
  132. <span class="float-right text-muted text-sm">2 days</span>
  133. </a>
  134. <div class="dropdown-divider"></div>
  135. <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
  136. </div>
  137. </li>
  138. <li class="nav-item">
  139. <a class="nav-link" data-widget="fullscreen" href="#" role="button">
  140. <i class="fas fa-expand-arrows-alt"></i>
  141. </a>
  142. </li>
  143. <li class="nav-item">
  144. <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
  145. <i class="fas fa-th-large"></i>
  146. </a>
  147. </li>
  148. </ul>
  149. </nav>
  150. <!-- /.navbar -->
  151. <!-- Main Sidebar Container -->
  152. <aside class="main-sidebar sidebar-dark-primary elevation-4">
  153. <!-- Brand Logo -->
  154. <a href="../../index3.html" class="brand-link">
  155. <img src="../../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
  156. <span class="brand-text font-weight-light">AdminLTE 3</span>
  157. </a>
  158. <!-- Sidebar -->
  159. <div class="sidebar">
  160. <!-- Sidebar user (optional) -->
  161. <div class="user-panel mt-3 pb-3 mb-3 d-flex">
  162. <div class="image">
  163. <img src="../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
  164. </div>
  165. <div class="info">
  166. <a href="#" class="d-block">Alexander Pierce</a>
  167. </div>
  168. </div>
  169. <!-- SidebarSearch Form -->
  170. <div class="form-inline">
  171. <div class="input-group" data-widget="sidebar-search">
  172. <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
  173. <div class="input-group-append">
  174. <button class="btn btn-sidebar">
  175. <i class="fas fa-search fa-fw"></i>
  176. </button>
  177. </div>
  178. </div>
  179. </div>
  180. <!-- Sidebar Menu -->
  181. <nav class="mt-2">
  182. <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
  183. <!-- Add icons to the links using the .nav-icon class
  184. with font-awesome or any other icon font library -->
  185. <li class="nav-item">
  186. <a href="#" class="nav-link">
  187. <i class="nav-icon fas fa-tachometer-alt"></i>
  188. <p>
  189. Dashboard
  190. <i class="right fas fa-angle-left"></i>
  191. </p>
  192. </a>
  193. <ul class="nav nav-treeview">
  194. <li class="nav-item">
  195. <a href="../../index.html" class="nav-link">
  196. <i class="far fa-circle nav-icon"></i>
  197. <p>Dashboard v1</p>
  198. </a>
  199. </li>
  200. <li class="nav-item">
  201. <a href="../../index2.html" class="nav-link">
  202. <i class="far fa-circle nav-icon"></i>
  203. <p>Dashboard v2</p>
  204. </a>
  205. </li>
  206. <li class="nav-item">
  207. <a href="../../index3.html" class="nav-link">
  208. <i class="far fa-circle nav-icon"></i>
  209. <p>Dashboard v3</p>
  210. </a>
  211. </li>
  212. </ul>
  213. </li>
  214. <li class="nav-item">
  215. <a href="../widgets.html" class="nav-link">
  216. <i class="nav-icon fas fa-th"></i>
  217. <p>
  218. Widgets
  219. <span class="right badge badge-danger">New</span>
  220. </p>
  221. </a>
  222. </li>
  223. <li class="nav-item">
  224. <a href="#" class="nav-link">
  225. <i class="nav-icon fas fa-copy"></i>
  226. <p>
  227. Layout Options
  228. <i class="fas fa-angle-left right"></i>
  229. <span class="badge badge-info right">6</span>
  230. </p>
  231. </a>
  232. <ul class="nav nav-treeview">
  233. <li class="nav-item">
  234. <a href="../layout/top-nav.html" class="nav-link">
  235. <i class="far fa-circle nav-icon"></i>
  236. <p>Top Navigation</p>
  237. </a>
  238. </li>
  239. <li class="nav-item">
  240. <a href="../layout/top-nav-sidebar.html" class="nav-link">
  241. <i class="far fa-circle nav-icon"></i>
  242. <p>Top Navigation + Sidebar</p>
  243. </a>
  244. </li>
  245. <li class="nav-item">
  246. <a href="../layout/boxed.html" class="nav-link">
  247. <i class="far fa-circle nav-icon"></i>
  248. <p>Boxed</p>
  249. </a>
  250. </li>
  251. <li class="nav-item">
  252. <a href="../layout/fixed-sidebar.html" class="nav-link">
  253. <i class="far fa-circle nav-icon"></i>
  254. <p>Fixed Sidebar</p>
  255. </a>
  256. </li>
  257. <li class="nav-item">
  258. <a href="../layout/fixed-sidebar-custom.html" class="nav-link">
  259. <i class="far fa-circle nav-icon"></i>
  260. <p>Fixed Sidebar <small>+ Custom Area</small></p>
  261. </a>
  262. </li>
  263. <li class="nav-item">
  264. <a href="../layout/fixed-topnav.html" class="nav-link">
  265. <i class="far fa-circle nav-icon"></i>
  266. <p>Fixed Navbar</p>
  267. </a>
  268. </li>
  269. <li class="nav-item">
  270. <a href="../layout/fixed-footer.html" class="nav-link">
  271. <i class="far fa-circle nav-icon"></i>
  272. <p>Fixed Footer</p>
  273. </a>
  274. </li>
  275. <li class="nav-item">
  276. <a href="../layout/collapsed-sidebar.html" class="nav-link">
  277. <i class="far fa-circle nav-icon"></i>
  278. <p>Collapsed Sidebar</p>
  279. </a>
  280. </li>
  281. </ul>
  282. </li>
  283. <li class="nav-item">
  284. <a href="#" class="nav-link">
  285. <i class="nav-icon fas fa-chart-pie"></i>
  286. <p>
  287. Charts
  288. <i class="right fas fa-angle-left"></i>
  289. </p>
  290. </a>
  291. <ul class="nav nav-treeview">
  292. <li class="nav-item">
  293. <a href="../charts/chartjs.html" class="nav-link">
  294. <i class="far fa-circle nav-icon"></i>
  295. <p>ChartJS</p>
  296. </a>
  297. </li>
  298. <li class="nav-item">
  299. <a href="../charts/flot.html" class="nav-link">
  300. <i class="far fa-circle nav-icon"></i>
  301. <p>Flot</p>
  302. </a>
  303. </li>
  304. <li class="nav-item">
  305. <a href="../charts/inline.html" class="nav-link">
  306. <i class="far fa-circle nav-icon"></i>
  307. <p>Inline</p>
  308. </a>
  309. </li>
  310. <li class="nav-item">
  311. <a href="../charts/uplot.html" class="nav-link">
  312. <i class="far fa-circle nav-icon"></i>
  313. <p>uPlot</p>
  314. </a>
  315. </li>
  316. </ul>
  317. </li>
  318. <li class="nav-item">
  319. <a href="#" class="nav-link">
  320. <i class="nav-icon fas fa-tree"></i>
  321. <p>
  322. UI Elements
  323. <i class="fas fa-angle-left right"></i>
  324. </p>
  325. </a>
  326. <ul class="nav nav-treeview">
  327. <li class="nav-item">
  328. <a href="../UI/general.html" class="nav-link">
  329. <i class="far fa-circle nav-icon"></i>
  330. <p>General</p>
  331. </a>
  332. </li>
  333. <li class="nav-item">
  334. <a href="../UI/icons.html" class="nav-link">
  335. <i class="far fa-circle nav-icon"></i>
  336. <p>Icons</p>
  337. </a>
  338. </li>
  339. <li class="nav-item">
  340. <a href="../UI/buttons.html" class="nav-link">
  341. <i class="far fa-circle nav-icon"></i>
  342. <p>Buttons</p>
  343. </a>
  344. </li>
  345. <li class="nav-item">
  346. <a href="../UI/sliders.html" class="nav-link">
  347. <i class="far fa-circle nav-icon"></i>
  348. <p>Sliders</p>
  349. </a>
  350. </li>
  351. <li class="nav-item">
  352. <a href="../UI/modals.html" class="nav-link">
  353. <i class="far fa-circle nav-icon"></i>
  354. <p>Modals & Alerts</p>
  355. </a>
  356. </li>
  357. <li class="nav-item">
  358. <a href="../UI/navbar.html" class="nav-link">
  359. <i class="far fa-circle nav-icon"></i>
  360. <p>Navbar & Tabs</p>
  361. </a>
  362. </li>
  363. <li class="nav-item">
  364. <a href="../UI/timeline.html" class="nav-link">
  365. <i class="far fa-circle nav-icon"></i>
  366. <p>Timeline</p>
  367. </a>
  368. </li>
  369. <li class="nav-item">
  370. <a href="../UI/ribbons.html" class="nav-link">
  371. <i class="far fa-circle nav-icon"></i>
  372. <p>Ribbons</p>
  373. </a>
  374. </li>
  375. </ul>
  376. </li>
  377. <li class="nav-item">
  378. <a href="#" class="nav-link">
  379. <i class="nav-icon fas fa-edit"></i>
  380. <p>
  381. Forms
  382. <i class="fas fa-angle-left right"></i>
  383. </p>
  384. </a>
  385. <ul class="nav nav-treeview">
  386. <li class="nav-item">
  387. <a href="../forms/general.html" class="nav-link">
  388. <i class="far fa-circle nav-icon"></i>
  389. <p>General Elements</p>
  390. </a>
  391. </li>
  392. <li class="nav-item">
  393. <a href="../forms/advanced.html" class="nav-link">
  394. <i class="far fa-circle nav-icon"></i>
  395. <p>Advanced Elements</p>
  396. </a>
  397. </li>
  398. <li class="nav-item">
  399. <a href="../forms/editors.html" class="nav-link">
  400. <i class="far fa-circle nav-icon"></i>
  401. <p>Editors</p>
  402. </a>
  403. </li>
  404. <li class="nav-item">
  405. <a href="../forms/validation.html" class="nav-link">
  406. <i class="far fa-circle nav-icon"></i>
  407. <p>Validation</p>
  408. </a>
  409. </li>
  410. </ul>
  411. </li>
  412. <li class="nav-item">
  413. <a href="#" class="nav-link">
  414. <i class="nav-icon fas fa-table"></i>
  415. <p>
  416. Tables
  417. <i class="fas fa-angle-left right"></i>
  418. </p>
  419. </a>
  420. <ul class="nav nav-treeview">
  421. <li class="nav-item">
  422. <a href="../tables/simple.html" class="nav-link">
  423. <i class="far fa-circle nav-icon"></i>
  424. <p>Simple Tables</p>
  425. </a>
  426. </li>
  427. <li class="nav-item">
  428. <a href="../tables/data.html" class="nav-link">
  429. <i class="far fa-circle nav-icon"></i>
  430. <p>DataTables</p>
  431. </a>
  432. </li>
  433. <li class="nav-item">
  434. <a href="../tables/jsgrid.html" class="nav-link">
  435. <i class="far fa-circle nav-icon"></i>
  436. <p>jsGrid</p>
  437. </a>
  438. </li>
  439. </ul>
  440. </li>
  441. <li class="nav-header">EXAMPLES</li>
  442. <li class="nav-item">
  443. <a href="../calendar.html" class="nav-link">
  444. <i class="nav-icon far fa-calendar-alt"></i>
  445. <p>
  446. Calendar
  447. <span class="badge badge-info right">2</span>
  448. </p>
  449. </a>
  450. </li>
  451. <li class="nav-item">
  452. <a href="../gallery.html" class="nav-link">
  453. <i class="nav-icon far fa-image"></i>
  454. <p>
  455. Gallery
  456. </p>
  457. </a>
  458. </li>
  459. <li class="nav-item">
  460. <a href="../kanban.html" class="nav-link">
  461. <i class="nav-icon fas fa-columns"></i>
  462. <p>
  463. Kanban Board
  464. </p>
  465. </a>
  466. </li>
  467. <li class="nav-item">
  468. <a href="#" class="nav-link">
  469. <i class="nav-icon far fa-envelope"></i>
  470. <p>
  471. Mailbox
  472. <i class="fas fa-angle-left right"></i>
  473. </p>
  474. </a>
  475. <ul class="nav nav-treeview">
  476. <li class="nav-item">
  477. <a href="../mailbox/mailbox.html" class="nav-link">
  478. <i class="far fa-circle nav-icon"></i>
  479. <p>Inbox</p>
  480. </a>
  481. </li>
  482. <li class="nav-item">
  483. <a href="../mailbox/compose.html" class="nav-link">
  484. <i class="far fa-circle nav-icon"></i>
  485. <p>Compose</p>
  486. </a>
  487. </li>
  488. <li class="nav-item">
  489. <a href="../mailbox/read-mail.html" class="nav-link">
  490. <i class="far fa-circle nav-icon"></i>
  491. <p>Read</p>
  492. </a>
  493. </li>
  494. </ul>
  495. </li>
  496. <li class="nav-item menu-open">
  497. <a href="#" class="nav-link active">
  498. <i class="nav-icon fas fa-book"></i>
  499. <p>
  500. Pages
  501. <i class="fas fa-angle-left right"></i>
  502. </p>
  503. </a>
  504. <ul class="nav nav-treeview">
  505. <li class="nav-item">
  506. <a href="../examples/invoice.html" class="nav-link active">
  507. <i class="far fa-circle nav-icon"></i>
  508. <p>Invoice</p>
  509. </a>
  510. </li>
  511. <li class="nav-item">
  512. <a href="../examples/profile.html" class="nav-link">
  513. <i class="far fa-circle nav-icon"></i>
  514. <p>Profile</p>
  515. </a>
  516. </li>
  517. <li class="nav-item">
  518. <a href="../examples/e-commerce.html" class="nav-link">
  519. <i class="far fa-circle nav-icon"></i>
  520. <p>E-commerce</p>
  521. </a>
  522. </li>
  523. <li class="nav-item">
  524. <a href="../examples/projects.html" class="nav-link">
  525. <i class="far fa-circle nav-icon"></i>
  526. <p>Projects</p>
  527. </a>
  528. </li>
  529. <li class="nav-item">
  530. <a href="../examples/project-add.html" class="nav-link">
  531. <i class="far fa-circle nav-icon"></i>
  532. <p>Project Add</p>
  533. </a>
  534. </li>
  535. <li class="nav-item">
  536. <a href="../examples/project-edit.html" class="nav-link">
  537. <i class="far fa-circle nav-icon"></i>
  538. <p>Project Edit</p>
  539. </a>
  540. </li>
  541. <li class="nav-item">
  542. <a href="../examples/project-detail.html" class="nav-link">
  543. <i class="far fa-circle nav-icon"></i>
  544. <p>Project Detail</p>
  545. </a>
  546. </li>
  547. <li class="nav-item">
  548. <a href="../examples/contacts.html" class="nav-link">
  549. <i class="far fa-circle nav-icon"></i>
  550. <p>Contacts</p>
  551. </a>
  552. </li>
  553. <li class="nav-item">
  554. <a href="../examples/faq.html" class="nav-link">
  555. <i class="far fa-circle nav-icon"></i>
  556. <p>FAQ</p>
  557. </a>
  558. </li>
  559. <li class="nav-item">
  560. <a href="../examples/contact-us.html" class="nav-link">
  561. <i class="far fa-circle nav-icon"></i>
  562. <p>Contact us</p>
  563. </a>
  564. </li>
  565. </ul>
  566. </li>
  567. <li class="nav-item">
  568. <a href="#" class="nav-link">
  569. <i class="nav-icon far fa-plus-square"></i>
  570. <p>
  571. Extras
  572. <i class="fas fa-angle-left right"></i>
  573. </p>
  574. </a>
  575. <ul class="nav nav-treeview">
  576. <li class="nav-item">
  577. <a href="#" class="nav-link">
  578. <i class="far fa-circle nav-icon"></i>
  579. <p>
  580. Login & Register v1
  581. <i class="fas fa-angle-left right"></i>
  582. </p>
  583. </a>
  584. <ul class="nav nav-treeview">
  585. <li class="nav-item">
  586. <a href="../examples/login.html" class="nav-link">
  587. <i class="far fa-circle nav-icon"></i>
  588. <p>Login v1</p>
  589. </a>
  590. </li>
  591. <li class="nav-item">
  592. <a href="../examples/register.html" class="nav-link">
  593. <i class="far fa-circle nav-icon"></i>
  594. <p>Register v1</p>
  595. </a>
  596. </li>
  597. <li class="nav-item">
  598. <a href="../examples/forgot-password.html" class="nav-link">
  599. <i class="far fa-circle nav-icon"></i>
  600. <p>Forgot Password v1</p>
  601. </a>
  602. </li>
  603. <li class="nav-item">
  604. <a href="../examples/recover-password.html" class="nav-link">
  605. <i class="far fa-circle nav-icon"></i>
  606. <p>Recover Password v1</p>
  607. </a>
  608. </li>
  609. </ul>
  610. </li>
  611. <li class="nav-item">
  612. <a href="#" class="nav-link">
  613. <i class="far fa-circle nav-icon"></i>
  614. <p>
  615. Login & Register v2
  616. <i class="fas fa-angle-left right"></i>
  617. </p>
  618. </a>
  619. <ul class="nav nav-treeview">
  620. <li class="nav-item">
  621. <a href="../examples/login-v2.html" class="nav-link">
  622. <i class="far fa-circle nav-icon"></i>
  623. <p>Login v2</p>
  624. </a>
  625. </li>
  626. <li class="nav-item">
  627. <a href="../examples/register-v2.html" class="nav-link">
  628. <i class="far fa-circle nav-icon"></i>
  629. <p>Register v2</p>
  630. </a>
  631. </li>
  632. <li class="nav-item">
  633. <a href="../examples/forgot-password-v2.html" class="nav-link">
  634. <i class="far fa-circle nav-icon"></i>
  635. <p>Forgot Password v2</p>
  636. </a>
  637. </li>
  638. <li class="nav-item">
  639. <a href="../examples/recover-password-v2.html" class="nav-link">
  640. <i class="far fa-circle nav-icon"></i>
  641. <p>Recover Password v2</p>
  642. </a>
  643. </li>
  644. </ul>
  645. </li>
  646. <li class="nav-item">
  647. <a href="../examples/lockscreen.html" class="nav-link">
  648. <i class="far fa-circle nav-icon"></i>
  649. <p>Lockscreen</p>
  650. </a>
  651. </li>
  652. <li class="nav-item">
  653. <a href="../examples/legacy-user-menu.html" class="nav-link">
  654. <i class="far fa-circle nav-icon"></i>
  655. <p>Legacy User Menu</p>
  656. </a>
  657. </li>
  658. <li class="nav-item">
  659. <a href="../examples/language-menu.html" class="nav-link">
  660. <i class="far fa-circle nav-icon"></i>
  661. <p>Language Menu</p>
  662. </a>
  663. </li>
  664. <li class="nav-item">
  665. <a href="../examples/404.html" class="nav-link">
  666. <i class="far fa-circle nav-icon"></i>
  667. <p>Error 404</p>
  668. </a>
  669. </li>
  670. <li class="nav-item">
  671. <a href="../examples/500.html" class="nav-link">
  672. <i class="far fa-circle nav-icon"></i>
  673. <p>Error 500</p>
  674. </a>
  675. </li>
  676. <li class="nav-item">
  677. <a href="../examples/pace.html" class="nav-link">
  678. <i class="far fa-circle nav-icon"></i>
  679. <p>Pace</p>
  680. </a>
  681. </li>
  682. <li class="nav-item">
  683. <a href="../examples/blank.html" class="nav-link">
  684. <i class="far fa-circle nav-icon"></i>
  685. <p>Blank Page</p>
  686. </a>
  687. </li>
  688. <li class="nav-item">
  689. <a href="../../starter.html" class="nav-link">
  690. <i class="far fa-circle nav-icon"></i>
  691. <p>Starter Page</p>
  692. </a>
  693. </li>
  694. </ul>
  695. </li>
  696. <li class="nav-item">
  697. <a href="#" class="nav-link">
  698. <i class="nav-icon fas fa-search"></i>
  699. <p>
  700. Search
  701. <i class="fas fa-angle-left right"></i>
  702. </p>
  703. </a>
  704. <ul class="nav nav-treeview">
  705. <li class="nav-item">
  706. <a href="../search/simple.html" class="nav-link">
  707. <i class="far fa-circle nav-icon"></i>
  708. <p>Simple Search</p>
  709. </a>
  710. </li>
  711. <li class="nav-item">
  712. <a href="../search/enhanced.html" class="nav-link">
  713. <i class="far fa-circle nav-icon"></i>
  714. <p>Enhanced</p>
  715. </a>
  716. </li>
  717. </ul>
  718. </li>
  719. <li class="nav-header">MISCELLANEOUS</li>
  720. <li class="nav-item">
  721. <a href="../../iframe.html" class="nav-link">
  722. <i class="nav-icon fas fa-ellipsis-h"></i>
  723. <p>Tabbed IFrame Plugin</p>
  724. </a>
  725. </li>
  726. <li class="nav-item">
  727. <a href="https://adminlte.io/docs/3.1/" class="nav-link">
  728. <i class="nav-icon fas fa-file"></i>
  729. <p>Documentation</p>
  730. </a>
  731. </li>
  732. <li class="nav-header">MULTI LEVEL EXAMPLE</li>
  733. <li class="nav-item">
  734. <a href="#" class="nav-link">
  735. <i class="fas fa-circle nav-icon"></i>
  736. <p>Level 1</p>
  737. </a>
  738. </li>
  739. <li class="nav-item">
  740. <a href="#" class="nav-link">
  741. <i class="nav-icon fas fa-circle"></i>
  742. <p>
  743. Level 1
  744. <i class="right fas fa-angle-left"></i>
  745. </p>
  746. </a>
  747. <ul class="nav nav-treeview">
  748. <li class="nav-item">
  749. <a href="#" class="nav-link">
  750. <i class="far fa-circle nav-icon"></i>
  751. <p>Level 2</p>
  752. </a>
  753. </li>
  754. <li class="nav-item">
  755. <a href="#" class="nav-link">
  756. <i class="far fa-circle nav-icon"></i>
  757. <p>
  758. Level 2
  759. <i class="right fas fa-angle-left"></i>
  760. </p>
  761. </a>
  762. <ul class="nav nav-treeview">
  763. <li class="nav-item">
  764. <a href="#" class="nav-link">
  765. <i class="far fa-dot-circle nav-icon"></i>
  766. <p>Level 3</p>
  767. </a>
  768. </li>
  769. <li class="nav-item">
  770. <a href="#" class="nav-link">
  771. <i class="far fa-dot-circle nav-icon"></i>
  772. <p>Level 3</p>
  773. </a>
  774. </li>
  775. <li class="nav-item">
  776. <a href="#" class="nav-link">
  777. <i class="far fa-dot-circle nav-icon"></i>
  778. <p>Level 3</p>
  779. </a>
  780. </li>
  781. </ul>
  782. </li>
  783. <li class="nav-item">
  784. <a href="#" class="nav-link">
  785. <i class="far fa-circle nav-icon"></i>
  786. <p>Level 2</p>
  787. </a>
  788. </li>
  789. </ul>
  790. </li>
  791. <li class="nav-item">
  792. <a href="#" class="nav-link">
  793. <i class="fas fa-circle nav-icon"></i>
  794. <p>Level 1</p>
  795. </a>
  796. </li>
  797. <li class="nav-header">LABELS</li>
  798. <li class="nav-item">
  799. <a href="#" class="nav-link">
  800. <i class="nav-icon far fa-circle text-danger"></i>
  801. <p class="text">Important</p>
  802. </a>
  803. </li>
  804. <li class="nav-item">
  805. <a href="#" class="nav-link">
  806. <i class="nav-icon far fa-circle text-warning"></i>
  807. <p>Warning</p>
  808. </a>
  809. </li>
  810. <li class="nav-item">
  811. <a href="#" class="nav-link">
  812. <i class="nav-icon far fa-circle text-info"></i>
  813. <p>Informational</p>
  814. </a>
  815. </li>
  816. </ul>
  817. </nav>
  818. <!-- /.sidebar-menu -->
  819. </div>
  820. <!-- /.sidebar -->
  821. </aside>
  822. <!-- Content Wrapper. Contains page content -->
  823. <div class="content-wrapper">
  824. <!-- Content Header (Page header) -->
  825. <section class="content-header">
  826. <div class="container-fluid">
  827. <div class="row mb-2">
  828. <div class="col-sm-6">
  829. <h1>Invoice</h1>
  830. </div>
  831. <div class="col-sm-6">
  832. <ol class="breadcrumb float-sm-right">
  833. <li class="breadcrumb-item"><a href="#">Home</a></li>
  834. <li class="breadcrumb-item active">Invoice</li>
  835. </ol>
  836. </div>
  837. </div>
  838. </div><!-- /.container-fluid -->
  839. </section>
  840. <section class="content">
  841. <div class="container-fluid">
  842. <div class="row">
  843. <div class="col-12">
  844. <div class="callout callout-info">
  845. <h5><i class="fas fa-info"></i> Note:</h5>
  846. This page has been enhanced for printing. Click the print button at the bottom of the invoice to test.
  847. </div>
  848. <!-- Main content -->
  849. <div class="invoice p-3 mb-3">
  850. <!-- title row -->
  851. <div class="row">
  852. <div class="col-12">
  853. <h4>
  854. <i class="fas fa-globe"></i> AdminLTE, Inc.
  855. <small class="float-right">Date: 2/10/2014</small>
  856. </h4>
  857. </div>
  858. <!-- /.col -->
  859. </div>
  860. <!-- info row -->
  861. <div class="row invoice-info">
  862. <div class="col-sm-4 invoice-col">
  863. From
  864. <address>
  865. <strong>Admin, Inc.</strong><br>
  866. 795 Folsom Ave, Suite 600<br>
  867. San Francisco, CA 94107<br>
  868. Phone: (804) 123-5432<br>
  869. Email: info@almasaeedstudio.com
  870. </address>
  871. </div>
  872. <!-- /.col -->
  873. <div class="col-sm-4 invoice-col">
  874. To
  875. <address>
  876. <strong>John Doe</strong><br>
  877. 795 Folsom Ave, Suite 600<br>
  878. San Francisco, CA 94107<br>
  879. Phone: (555) 539-1037<br>
  880. Email: john.doe@example.com
  881. </address>
  882. </div>
  883. <!-- /.col -->
  884. <div class="col-sm-4 invoice-col">
  885. <b>Invoice #007612</b><br>
  886. <br>
  887. <b>Order ID:</b> 4F3S8J<br>
  888. <b>Payment Due:</b> 2/22/2014<br>
  889. <b>Account:</b> 968-34567
  890. </div>
  891. <!-- /.col -->
  892. </div>
  893. <!-- /.row -->
  894. <!-- Table row -->
  895. <div class="row">
  896. <div class="col-12 table-responsive">
  897. <table class="table table-striped">
  898. <thead>
  899. <tr>
  900. <th>Qty</th>
  901. <th>Product</th>
  902. <th>Serial #</th>
  903. <th>Description</th>
  904. <th>Subtotal</th>
  905. </tr>
  906. </thead>
  907. <tbody>
  908. <tr>
  909. <td>1</td>
  910. <td>Call of Duty</td>
  911. <td>455-981-221</td>
  912. <td>El snort testosterone trophy driving gloves handsome</td>
  913. <td>$64.50</td>
  914. </tr>
  915. <tr>
  916. <td>1</td>
  917. <td>Need for Speed IV</td>
  918. <td>247-925-726</td>
  919. <td>Wes Anderson umami biodiesel</td>
  920. <td>$50.00</td>
  921. </tr>
  922. <tr>
  923. <td>1</td>
  924. <td>Monsters DVD</td>
  925. <td>735-845-642</td>
  926. <td>Terry Richardson helvetica tousled street art master</td>
  927. <td>$10.70</td>
  928. </tr>
  929. <tr>
  930. <td>1</td>
  931. <td>Grown Ups Blue Ray</td>
  932. <td>422-568-642</td>
  933. <td>Tousled lomo letterpress</td>
  934. <td>$25.99</td>
  935. </tr>
  936. </tbody>
  937. </table>
  938. </div>
  939. <!-- /.col -->
  940. </div>
  941. <!-- /.row -->
  942. <div class="row">
  943. <!-- accepted payments column -->
  944. <div class="col-6">
  945. <p class="lead">Payment Methods:</p>
  946. <img src="../../dist/img/credit/visa.png" alt="Visa">
  947. <img src="../../dist/img/credit/mastercard.png" alt="Mastercard">
  948. <img src="../../dist/img/credit/american-express.png" alt="American Express">
  949. <img src="../../dist/img/credit/paypal2.png" alt="Paypal">
  950. <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
  951. Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem
  952. plugg
  953. dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
  954. </p>
  955. </div>
  956. <!-- /.col -->
  957. <div class="col-6">
  958. <p class="lead">Amount Due 2/22/2014</p>
  959. <div class="table-responsive">
  960. <table class="table">
  961. <tr>
  962. <th style="width:50%">Subtotal:</th>
  963. <td>$250.30</td>
  964. </tr>
  965. <tr>
  966. <th>Tax (9.3%)</th>
  967. <td>$10.34</td>
  968. </tr>
  969. <tr>
  970. <th>Shipping:</th>
  971. <td>$5.80</td>
  972. </tr>
  973. <tr>
  974. <th>Total:</th>
  975. <td>$265.24</td>
  976. </tr>
  977. </table>
  978. </div>
  979. </div>
  980. <!-- /.col -->
  981. </div>
  982. <!-- /.row -->
  983. <!-- this row will not appear when printing -->
  984. <div class="row no-print">
  985. <div class="col-12">
  986. <a href="invoice-print.html" rel="noopener" target="_blank" class="btn btn-default"><i class="fas fa-print"></i> Print</a>
  987. <button type="button" class="btn btn-success float-right"><i class="far fa-credit-card"></i> Submit
  988. Payment
  989. </button>
  990. <button type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
  991. <i class="fas fa-download"></i> Generate PDF
  992. </button>
  993. </div>
  994. </div>
  995. </div>
  996. <!-- /.invoice -->
  997. </div><!-- /.col -->
  998. </div><!-- /.row -->
  999. </div><!-- /.container-fluid -->
  1000. </section>
  1001. <!-- /.content -->
  1002. </div>
  1003. <!-- /.content-wrapper -->
  1004. <footer class="main-footer no-print">
  1005. <div class="float-right d-none d-sm-block">
  1006. <b>Version</b> 3.2.0
  1007. </div>
  1008. <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
  1009. </footer>
  1010. <!-- Control Sidebar -->
  1011. <aside class="control-sidebar control-sidebar-dark">
  1012. <!-- Control sidebar content goes here -->
  1013. </aside>
  1014. <!-- /.control-sidebar -->
  1015. </div>
  1016. <!-- ./wrapper -->
  1017. <!-- jQuery -->
  1018. <script src="../../plugins/jquery/jquery.min.js"></script>
  1019. <!-- Bootstrap 4 -->
  1020. <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  1021. <!-- AdminLTE App -->
  1022. <script src="../../dist/js/adminlte.min.js"></script>
  1023. <!-- AdminLTE for demo purposes -->
  1024. <script src="../../dist/js/demo.js"></script>
  1025. </body>
  1026. </html>