API tools faq
paste
Advertisement
gsmashik

30.06.2018

gsmashik
Jun 30th, 2018
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 43.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  5.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  6.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  7.     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  8.     <!-- font Awesome 4.5.0 -->
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  10.  
  11.  
  12.     <!-- new class bootstrap 4  -->
  13.     <style>
  14. /*Flex Class*/
  15. .flex-row {
  16.   -ms-flex-direction: row !important;
  17.   flex-direction: row !important;
  18. }
  19.  
  20. .flex-column {
  21.   -ms-flex-direction: column !important;
  22.   flex-direction: column !important;
  23. }
  24.  
  25. .flex-row-reverse {
  26.   -ms-flex-direction: row-reverse !important;
  27.   flex-direction: row-reverse !important;
  28. }
  29.  
  30. .flex-column-reverse {
  31.   -ms-flex-direction: column-reverse !important;
  32.   flex-direction: column-reverse !important;
  33. }
  34.  
  35. .flex-wrap {
  36.   -ms-flex-wrap: wrap !important;
  37.   flex-wrap: wrap !important;
  38. }
  39.  
  40. .flex-nowrap {
  41.   -ms-flex-wrap: nowrap !important;
  42.   flex-wrap: nowrap !important;
  43. }
  44.  
  45. .flex-wrap-reverse {
  46.   -ms-flex-wrap: wrap-reverse !important;
  47.   flex-wrap: wrap-reverse !important;
  48. }
  49.  
  50. .flex-fill {
  51.   -ms-flex: 1 1 auto !important;
  52.   flex: 1 1 auto !important;
  53. }
  54.  
  55. .flex-grow-0 {
  56.   -ms-flex-positive: 0 !important;
  57.   flex-grow: 0 !important;
  58. }
  59.  
  60. .flex-grow-1 {
  61.   -ms-flex-positive: 1 !important;
  62.   flex-grow: 1 !important;
  63. }
  64.  
  65. .flex-shrink-0 {
  66.   -ms-flex-negative: 0 !important;
  67.   flex-shrink: 0 !important;
  68. }
  69.  
  70. .flex-shrink-1 {
  71.   -ms-flex-negative: 1 !important;
  72.   flex-shrink: 1 !important;
  73. }
  74.     /*Vertical  Align Class*/
  75.     .align-baseline {
  76.   vertical-align: baseline !important;
  77. }
  78.  
  79. .align-top {
  80.   vertical-align: top !important;
  81. }
  82.  
  83. .align-middle {
  84.   vertical-align: middle !important;
  85. }
  86.  
  87. .align-bottom {
  88.   vertical-align: bottom !important;
  89. }
  90.  
  91. .align-text-bottom {
  92.   vertical-align: text-bottom !important;
  93. }
  94.  
  95. .align-text-top {
  96.   vertical-align: text-top !important;
  97. }
  98. /*Shadow Class*/
  99. .shadow-sm {
  100.   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  101. }
  102.  
  103. .shadow {
  104.   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  105. }
  106.  
  107. .shadow-lg {
  108.   box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  109. }
  110.  
  111. .shadow-none {
  112.   box-shadow: none !important;
  113. }
  114.  
  115.  
  116. /*Margon And Padding Class*/
  117. .m-0 {
  118.   margin: 0 !important;
  119. }
  120.  
  121. .mt-0,
  122. .my-0 {
  123.   margin-top: 0 !important;
  124. }
  125.  
  126. .mr-0,
  127. .mx-0 {
  128.   margin-right: 0 !important;
  129. }
  130.  
  131. .mb-0,
  132. .my-0 {
  133.   margin-bottom: 0 !important;
  134. }
  135.  
  136. .ml-0,
  137. .mx-0 {
  138.   margin-left: 0 !important;
  139. }
  140.  
  141. .m-1 {
  142.   margin: 0.25rem !important;
  143. }
  144.  
  145. .mt-1,
  146. .my-1 {
  147.   margin-top: 0.25rem !important;
  148. }
  149.  
  150. .mr-1,
  151. .mx-1 {
  152.   margin-right: 0.25rem !important;
  153. }
  154.  
  155. .mb-1,
  156. .my-1 {
  157.   margin-bottom: 0.25rem !important;
  158. }
  159.  
  160. .ml-1,
  161. .mx-1 {
  162.   margin-left: 0.25rem !important;
  163. }
  164.  
  165. .m-2 {
  166.   margin: 0.5rem !important;
  167. }
  168.  
  169. .mt-2,
  170. .my-2 {
  171.   margin-top: 0.5rem !important;
  172. }
  173.  
  174. .mr-2,
  175. .mx-2 {
  176.   margin-right: 0.5rem !important;
  177. }
  178.  
  179. .mb-2,
  180. .my-2 {
  181.   margin-bottom: 0.5rem !important;
  182. }
  183.  
  184. .ml-2,
  185. .mx-2 {
  186.   margin-left: 0.5rem !important;
  187. }
  188.  
  189. .m-3 {
  190.   margin: 1rem !important;
  191. }
  192.  
  193. .mt-3,
  194. .my-3 {
  195.   margin-top: 1rem !important;
  196. }
  197.  
  198. .mr-3,
  199. .mx-3 {
  200.   margin-right: 1rem !important;
  201. }
  202.  
  203. .mb-3,
  204. .my-3 {
  205.   margin-bottom: 1rem !important;
  206. }
  207.  
  208. .ml-3,
  209. .mx-3 {
  210.   margin-left: 1rem !important;
  211. }
  212.  
  213. .m-4 {
  214.   margin: 1.5rem !important;
  215. }
  216.  
  217. .mt-4,
  218. .my-4 {
  219.   margin-top: 1.5rem !important;
  220. }
  221.  
  222. .mr-4,
  223. .mx-4 {
  224.   margin-right: 1.5rem !important;
  225. }
  226.  
  227. .mb-4,
  228. .my-4 {
  229.   margin-bottom: 1.5rem !important;
  230. }
  231.  
  232. .ml-4,
  233. .mx-4 {
  234.   margin-left: 1.5rem !important;
  235. }
  236.  
  237. .m-5 {
  238.   margin: 3rem !important;
  239. }
  240.  
  241. .mt-5,
  242. .my-5 {
  243.   margin-top: 3rem !important;
  244. }
  245.  
  246. .mr-5,
  247. .mx-5 {
  248.   margin-right: 3rem !important;
  249. }
  250.  
  251. .mb-5,
  252. .my-5 {
  253.   margin-bottom: 3rem !important;
  254. }
  255.  
  256. .ml-5,
  257. .mx-5 {
  258.   margin-left: 3rem !important;
  259. }
  260.  
  261. .p-0 {
  262.   padding: 0 !important;
  263. }
  264.  
  265. .pt-0,
  266. .py-0 {
  267.   padding-top: 0 !important;
  268. }
  269.  
  270. .pr-0,
  271. .px-0 {
  272.   padding-right: 0 !important;
  273. }
  274.  
  275. .pb-0,
  276. .py-0 {
  277.   padding-bottom: 0 !important;
  278. }
  279.  
  280. .pl-0,
  281. .px-0 {
  282.   padding-left: 0 !important;
  283. }
  284.  
  285. .p-1 {
  286.   padding: 0.25rem !important;
  287. }
  288.  
  289. .pt-1,
  290. .py-1 {
  291.   padding-top: 0.25rem !important;
  292. }
  293.  
  294. .pr-1,
  295. .px-1 {
  296.   padding-right: 0.25rem !important;
  297. }
  298.  
  299. .pb-1,
  300. .py-1 {
  301.   padding-bottom: 0.25rem !important;
  302. }
  303.  
  304. .pl-1,
  305. .px-1 {
  306.   padding-left: 0.25rem !important;
  307. }
  308.  
  309. .p-2 {
  310.   padding: 0.5rem !important;
  311. }
  312.  
  313. .pt-2,
  314. .py-2 {
  315.   padding-top: 0.5rem !important;
  316. }
  317.  
  318. .pr-2,
  319. .px-2 {
  320.   padding-right: 0.5rem !important;
  321. }
  322.  
  323. .pb-2,
  324. .py-2 {
  325.   padding-bottom: 0.5rem !important;
  326. }
  327.  
  328. .pl-2,
  329. .px-2 {
  330.   padding-left: 0.5rem !important;
  331. }
  332.  
  333. .p-3 {
  334.   padding: 1rem !important;
  335. }
  336.  
  337. .pt-3,
  338. .py-3 {
  339.   padding-top: 1rem !important;
  340. }
  341.  
  342. .pr-3,
  343. .px-3 {
  344.   padding-right: 1rem !important;
  345. }
  346.  
  347. .pb-3,
  348. .py-3 {
  349.   padding-bottom: 1rem !important;
  350. }
  351.  
  352. .pl-3,
  353. .px-3 {
  354.   padding-left: 1rem !important;
  355. }
  356.  
  357. .p-4 {
  358.   padding: 1.5rem !important;
  359. }
  360.  
  361. .pt-4,
  362. .py-4 {
  363.   padding-top: 1.5rem !important;
  364. }
  365.  
  366. .pr-4,
  367. .px-4 {
  368.   padding-right: 1.5rem !important;
  369. }
  370.  
  371. .pb-4,
  372. .py-4 {
  373.   padding-bottom: 1.5rem !important;
  374. }
  375.  
  376. .pl-4,
  377. .px-4 {
  378.   padding-left: 1.5rem !important;
  379. }
  380.  
  381. .p-5 {
  382.   padding: 3rem !important;
  383. }
  384.  
  385. .pt-5,
  386. .py-5 {
  387.   padding-top: 3rem !important;
  388. }
  389.  
  390. .pr-5,
  391. .px-5 {
  392.   padding-right: 3rem !important;
  393. }
  394.  
  395. .pb-5,
  396. .py-5 {
  397.   padding-bottom: 3rem !important;
  398. }
  399.  
  400. .pl-5,
  401. .px-5 {
  402.   padding-left: 3rem !important;
  403. }
  404.  
  405. .m-auto {
  406.   margin: auto !important;
  407. }
  408.  
  409. .mt-auto,
  410. .my-auto {
  411.   margin-top: auto !important;
  412. }
  413.  
  414.  
  415.     /*Border Class*/
  416.       .border {
  417.   border: 1px solid #dee2e6 !important;
  418. }
  419.  
  420. .border-top {
  421.   border-top: 1px solid #dee2e6 !important;
  422. }
  423.  
  424. .border-right {
  425.   border-right: 1px solid #dee2e6 !important;
  426. }
  427.  
  428. .border-bottom {
  429.   border-bottom: 1px solid #dee2e6 !important;
  430. }
  431.  
  432. .border-left {
  433.   border-left: 1px solid #dee2e6 !important;
  434. }
  435.  
  436. .border-0 {
  437.   border: 0 !important;
  438. }
  439.  
  440. .border-top-0 {
  441.   border-top: 0 !important;
  442. }
  443.  
  444. .border-right-0 {
  445.   border-right: 0 !important;
  446. }
  447.  
  448. .border-bottom-0 {
  449.   border-bottom: 0 !important;
  450. }
  451.  
  452. .border-left-0 {
  453.   border-left: 0 !important;
  454. }
  455.  
  456. .border-primary {
  457.   border-color: #007bff !important;
  458. }
  459.  
  460. .border-secondary {
  461.   border-color: #6c757d !important;
  462. }
  463.  
  464. .border-success {
  465.   border-color: #28a745 !important;
  466. }
  467.  
  468. .border-info {
  469.   border-color: #17a2b8 !important;
  470. }
  471.  
  472. .border-warning {
  473.   border-color: #ffc107 !important;
  474. }
  475.  
  476. .border-danger {
  477.   border-color: #dc3545 !important;
  478. }
  479.  
  480. .border-light {
  481.   border-color: #f8f9fa !important;
  482. }
  483.  
  484. .border-dark {
  485.   border-color: #343a40 !important;
  486. }
  487.  
  488. .border-white {
  489.   border-color: #fff !important;
  490. }
  491.  
  492.  
  493. /*Round Class*/
  494. .rounded {
  495.   border-radius: 0.25rem !important;
  496. }
  497.  
  498. .rounded-top {
  499.   border-top-left-radius: 0.25rem !important;
  500.   border-top-right-radius: 0.25rem !important;
  501. }
  502.  
  503. .rounded-right {
  504.   border-top-right-radius: 0.25rem !important;
  505.   border-bottom-right-radius: 0.25rem !important;
  506. }
  507.  
  508. .rounded-bottom {
  509.   border-bottom-right-radius: 0.25rem !important;
  510.   border-bottom-left-radius: 0.25rem !important;
  511. }
  512.  
  513. .rounded-left {
  514.   border-top-left-radius: 0.25rem !important;
  515.   border-bottom-left-radius: 0.25rem !important;
  516. }
  517.  
  518. .rounded-circle {
  519.   border-radius: 50% !important;
  520. }
  521.  
  522. .rounded-0 {
  523.   border-radius: 0 !important;
  524. }
  525.  
  526.  
  527.  
  528. /*Align Center Class*/
  529. .mr-auto,
  530. .mx-auto {
  531.   margin-right: auto !important;
  532. }
  533.  
  534. .mb-auto,
  535. .my-auto {
  536.   margin-bottom: auto !important;
  537. }
  538.  
  539. .ml-auto,
  540. .mx-auto {
  541.   margin-left: auto !important;
  542. }
  543.  
  544.  
  545. /*width And Height Class*/
  546.  
  547. .w-25 {
  548.   width: 25% !important;
  549. }
  550.  
  551. .w-50 {
  552.   width: 50% !important;
  553. }
  554.  
  555. .w-75 {
  556.   width: 75% !important;
  557. }
  558.  
  559. .w-100 {
  560.   width: 100% !important;
  561. }
  562.  
  563. .w-auto {
  564.   width: auto !important;
  565. }
  566.  
  567. .h-25 {
  568.   height: 25% !important;
  569. }
  570.  
  571. .h-50 {
  572.   height: 50% !important;
  573. }
  574.  
  575. .h-75 {
  576.   height: 75% !important;
  577. }
  578.  
  579. .h-100 {
  580.   height: 100% !important;
  581. }
  582.  
  583. .h-auto {
  584.   height: auto !important;
  585. }
  586.  
  587.  
  588.     </style>
  589.     <!-- custom style -->
  590.     <style>
  591.      .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-sm-3, .col-md-8, .col-md-9,  .col-sm-10, .col-sm-11, .col-sm-12,  .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,  .col-xs-10, .col-xs-11, .col-xs-12,  .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{padding: 0px !important;}
  592.     }
  593.     .bb-blue{border-bottom: 1px solid #BABEBF;}
  594. label {
  595.  
  596.     display: inline-block;
  597.     max-width: 100%;
  598.     margin-bottom: 5px;
  599.     font-weight: bold;
  600.     font-size: 12px;
  601. padding-left: 0px;
  602. }
  603. .form-group {
  604.     margin-bottom: 0px;
  605. }
  606.     .clearfix{margin-bottom:0px;}
  607.     .bg-default{background-color: #EAF1F6;}
  608.     .bg-deep{    background-color: #C5DAEB;}
  609.     li.active a {    background-color: #8CB1DA !important ;}
  610.     .input-sm {
  611.     height: 20px;font-size: 11px;}
  612.     </style>
  613.     <style>
  614.     /*for Accordion Menu Glipikon Item*/
  615.     .panel-group .panel + .panel {
  616.     margin-top: 0px;
  617. }
  618.     .glyphicon { margin-right:10px; }
  619.     .panel-body { padding:0px; }
  620.     .panel-body table tr td { padding-left: 15px }
  621.     .panel-body .table {margin-bottom: 0px; }
  622.     </style>
  623.     <!-- For Modal Mimimize Maximize -->
  624.     <style type="text/css">
  625.     .modal-header .btnGrp{
  626.     position: absolute;
  627.     top: 8px;
  628.     right: 10px;
  629.     }
  630.     .modal{position: inherit;top: 1 !important;left: 1!important;width:900px;}
  631.     .min{
  632.     width: 250px;
  633.     height: 35px;
  634.     overflow: hidden !important;
  635.     padding: 0px !important;
  636.     margin: 0px;
  637.     float: left;
  638.     position: static !important;
  639.     }
  640.     .min .modal-dialog, .min .modal-content{
  641.     height: 100%;
  642.     width: 100%;
  643.     margin: 0px !important;
  644.     padding: 0px !important;
  645.     }
  646.     .min .modal-header{
  647.     height: 100%;
  648.     width: 100%;
  649.     margin: 0px !important;
  650.     padding: 3px 5px !important;
  651.     }
  652.     .display-none{display: none;}
  653.     button .fa{
  654.     font-size: 16px;
  655.     margin-left: 10px;
  656.     }
  657.     .min .fa{
  658.     font-size: 14px;
  659.     }
  660.     .min .menuTab{display: none;}
  661.     button:focus { outline: none; }
  662.     .minmaxCon{
  663.     height: 35px;
  664.     bottom: 1px;
  665.     left: 1px;
  666.     position: fixed;
  667.     right: 1px;
  668.     z-index: 9999;
  669.     }
  670.     </style>
  671.     <!-- for tble responsive in modl -->
  672.     <style>
  673.     .modal-body {
  674.     overflow-x: auto;}
  675.     </style>
  676.     <!-- For Modal Mimimize Maximize End -->
  677.     <style>
  678.     .light-gray{background-color: #f5f5f5;
  679.     border: 1px solid #e3e3e3;box-shadow: inset 0 1px 1px rgba(0,0,0,.05);color: #000 !important;}
  680.     .light-blue{background-color: #6BD9EC;
  681.     border: 1px solid #6BD9EC;set 0 1px 1px rgba(0,0,0,.05);color: #fff !important;}
  682.     .panel-body {
  683.     padding: 0px !important;
  684.     }
  685.     .container-fluid {
  686.     padding-right: 0px;
  687.     padding-left: 0px;
  688.     margin-right: auto;
  689.     margin-left: auto;
  690.     }
  691.     </style>
  692.   </head>
  693.   <body>
  694.     <div class="container-fluid">
  695.       <div class="panel panel-primary">
  696.         <div class="panel-heading">
  697.         </div>
  698.         <div class="panel-body">
  699.         <div class="clearfix border border-right-0 border-top-0 border-left-0 border-white "></div>
  700.           <!-- Top Menu Area -->
  701.           <div class="bg-primary fix"  style="width: 100%;height: 100%;">
  702.             <ul class="navbar-nav nav list-unstyled" >
  703.               <li class="nav-item">
  704.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">File</a>
  705.               </li>
  706.               <li class="nav-item">
  707.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Edit</a>
  708.               </li>
  709.               <li class="nav-item">
  710.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">View</a>
  711.               </li>
  712.               <li class="nav-item">
  713.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Data</a>
  714.               </li>
  715.              
  716.               <li class="nav-item">
  717.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Goto</a>
  718.               </li>
  719.              
  720.               <li class="nav-item">
  721.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Tools</a>
  722.               </li>
  723.              
  724.               <li class="nav-item">
  725.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Module</a>
  726.               </li>
  727.              
  728.               <li class="nav-item dropdown">
  729.                 <a class="dropdown-toggle nav-link" data-toggle="dropdown" style="padding: 5px 5px; color:black;" href="#">Window</a>
  730.                 <ul class="dropdown-menu">
  731.                   <li><a href="#">Page 1-1</a></li>
  732.                   <li><a class="btn btn-danger btn-lg mdlFire"  data-target="#maindow" href="#">Main Window</a></li>
  733.                   <li><a href="#">Page 1-3</a></li>
  734.                 </ul>
  735.               </li>
  736.               <li class="nav-item">
  737.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Help</a>
  738.               </li>
  739.             </ul>
  740.           </div>
  741.           <!-- Top Menu Area End-->
  742.  
  743.           <div class="clearfix border border-right-0 border-top-0 border-left-0 border-white "></div>
  744.  
  745.           <!-- Top Module Area -->
  746.           <div class="bg-default" style="width: 100%;height: 100%;overflow: auto;">
  747.             <ul class="navbar-nav nav list-unstyled">
  748.               <li class="nav-item">
  749.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><i class="fa fa-search"></i></a>
  750.               </li>
  751.               <li class="nav-item">
  752.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-print"></span></a>
  753.               </li>
  754.               <li class="nav-item">
  755.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  756.               </li>
  757.               <li class="nav-item">
  758.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-fax"></span></a>
  759.               </li>
  760.              
  761.               <li class="nav-item">
  762.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-file-excel-o"></span></a>
  763.               </li>
  764.              
  765.               <li class="nav-item">
  766.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-file-word-o"></span></a>
  767.               </li>
  768.              
  769.               <li class="nav-item">
  770.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-file-pdf-o"></span></a>
  771.               </li>
  772.              
  773.               <li class="nav-item">
  774.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-eye"></span></a>
  775.               </li>
  776.              
  777.              
  778.               <li class="nav-item">
  779.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-fast-backward"></span></a>
  780.               </li>
  781.              
  782.               <li class="nav-item">
  783.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>
  784.               </li>
  785.              
  786.               <li class="nav-item">
  787.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-chevron-right"></span></a>
  788.               </li>
  789.              
  790.               <li class="nav-item">
  791.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-fast-forward"></span></a>
  792.               </li>
  793.              
  794.               <li class="nav-item">
  795.                 <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-filter"></span></a>
  796.               </li>                 <li class="nav-item">
  797.               <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-equalizer"></span></a>
  798.             </li>             <li class="nav-item">
  799.             <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="  glyphicon glyphicon-paste"></span></a>
  800.           </li>             <li class="nav-item">
  801.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-copy"></span></a>
  802.         </li>   <li class="nav-item">
  803.         <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-usd"></span></a>
  804.       </li>   <li class="nav-item">
  805.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" fa fa-balance-scale"></span></a>
  806.     </li>
  807.    
  808.     <li class="nav-item">
  809.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-pencil"></span></a>
  810.     </li>
  811.     <li class="nav-item">
  812.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-cog"></span></a>
  813.     </li>         <li class="nav-item">
  814.     <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-alert"></span></a>
  815.   </li>
  816.  
  817.   <li class="nav-item">
  818.     <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-calendar"></span></a>
  819.   </li>
  820.   <li class="nav-item">
  821.     <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" fa fa-question"></span></a>
  822.   </li>
  823.  
  824. </ul>
  825. </div>  
  826. <div class="clearfix"></div>
  827.  
  828. <!-- Top Module Area End -->
  829. <div class="col-sm-3 col-md-3" style="padding-left: 0px;">
  830. <div class="panel panel-primary " class="modal fade mymodal" id="main-window" role="dialog">
  831.   <div class="panel-heading">
  832.    
  833.   </div>
  834.   <div class="panel-body">
  835.     <!-- for Accordion Menu -->
  836.     <div class="panel-group" id="accordion" >
  837.       <div class="panel panel-default">
  838.         <div class="panel-heading">
  839.           <h4 class="panel-title">
  840.           <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
  841.           </span>Administrator</a>
  842.           </h4>
  843.         </div>
  844.         <div id="collapseOne" class="panel-collapse collapse "> <!-- For Auto Collapse A Body Include panel-collapse collapse class -->
  845.         <div class="panel-body">
  846.           <table class="table">
  847.             <tr>
  848.               <td>
  849.                 <span class="glyphicon glyphicon-pencil text-primary"></span><a href="">Articles</a>
  850.               </td>
  851.             </tr>
  852.             <tr>
  853.               <td>
  854.                 <span class="glyphicon glyphicon-flash text-success"></span><a href="">News</a>
  855.               </td>
  856.             </tr>
  857.             <tr>
  858.               <td>
  859.                 <span class="glyphicon glyphicon-file text-info"></span><a href="">Newsletters</a>
  860.               </td>
  861.             </tr>
  862.             <tr>
  863.               <td>
  864.                 <span class="glyphicon glyphicon-comment text-success"></span><a href="">Comments</a>
  865.                 <span class="badge">42</span>
  866.               </td>
  867.             </tr>
  868.           </table>
  869.         </div>
  870.       </div>
  871.     </div>
  872.  
  873.     <div class="panel panel-default">
  874.       <div class="panel-heading">
  875.         <h4 class="panel-title">
  876.         <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
  877.         </span>Finnalcial</a>
  878.         </h4>
  879.       </div>
  880.       <div id="collapseTwo" class="panel-collapse collapse">
  881.         <div class="panel-body">
  882.           <table class="table">
  883.             <tr>
  884.               <td>
  885.                 <a href="">Orders</a> <span class="label label-success">$ 320</span>
  886.               </td>
  887.             </tr>
  888.             <tr>
  889.               <td>
  890.                 <a href="">Invoices</a>
  891.               </td>
  892.             </tr>
  893.             <tr>
  894.               <td>
  895.                 <a href="">Shipments</a>
  896.               </td>
  897.             </tr>
  898.             <tr>
  899.               <td>
  900.                 <a href="">Tex</a>
  901.               </td>
  902.             </tr>
  903.           </table>
  904.         </div>
  905.       </div>
  906.     </div>
  907.     <div class="panel panel-default">
  908.       <div class="panel-heading">
  909.         <h4 class="panel-title">
  910.         <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
  911.         </span>Sales Opportunities</a>
  912.         </h4>
  913.       </div>
  914.       <div id="collapseThree" class="panel-collapse collapse">
  915.         <div class="panel-body">
  916.           <table class="table">
  917.             <tr>
  918.               <td>
  919.                 <a href="">Change Password</a>
  920.               </td>
  921.             </tr>
  922.             <tr>
  923.               <td>
  924.                 <a href="">Notifications</a> <span class="label label-info">5</span>
  925.               </td>
  926.             </tr>
  927.             <tr>
  928.               <td>
  929.                 <a href="">Import/Export</a>
  930.               </td>
  931.             </tr>
  932.             <tr>
  933.               <td>
  934.                 <span class="glyphicon glyphicon-trash text-danger"></span><a href="" class="text-danger">
  935.               Delete Account</a>
  936.             </td>
  937.           </tr>
  938.         </table>
  939.       </div>
  940.     </div>
  941.   </div>
  942.   <div class="panel panel-default">
  943.     <div class="panel-heading">
  944.       <h4 class="panel-title">
  945.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  946.       </span>Sales Ar</a>
  947.       </h4>
  948.     </div>
  949.     <div id="collapseFour" class="panel-collapse collapse">
  950.       <div class="panel-body">
  951.         <table class="table">
  952.           <tr>
  953.             <td>
  954.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  955.             </td>
  956.           </tr>
  957.         </table>
  958.       </div>
  959.     </div>
  960.   </div>
  961.     <div class="panel panel-default">
  962.     <div class="panel-heading">
  963.       <h4 class="panel-title">
  964.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  965.       </span>Purchasing Ap</a>
  966.       </h4>
  967.     </div>
  968.     <div id="collapseFour" class="panel-collapse collapse">
  969.       <div class="panel-body">
  970.         <table class="table">
  971.           <tr>
  972.             <td>
  973.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  974.             </td>
  975.           </tr>
  976.         </table>
  977.       </div>
  978.     </div>
  979.   </div>
  980.  
  981.  
  982.       <div class="panel panel-default">
  983.     <div class="panel-heading">
  984.       <h4 class="panel-title">
  985.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  986.       </span>Business Partner</a>
  987.       </h4>
  988.     </div>
  989.     <div id="collapseFour" class="panel-collapse collapse">
  990.       <div class="panel-body">
  991.         <table class="table">
  992.           <tr>
  993.             <td>
  994.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  995.             </td>
  996.           </tr>
  997.         </table>
  998.       </div>
  999.     </div>
  1000.   </div>
  1001.  
  1002.  
  1003.        <div class="panel panel-default">
  1004.     <div class="panel-heading">
  1005.       <h4 class="panel-title">
  1006.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  1007.       </span>Banking</a>
  1008.       </h4>
  1009.     </div>
  1010.     <div id="collapseFour" class="panel-collapse collapse">
  1011.       <div class="panel-body">
  1012.         <table class="table">
  1013.           <tr>
  1014.             <td>
  1015.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  1016.             </td>
  1017.           </tr>
  1018.         </table>
  1019.       </div>
  1020.     </div>
  1021.   </div>
  1022.  
  1023. <div class="panel panel-default">
  1024.     <div class="panel-heading">
  1025.       <h4 class="panel-title">
  1026.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  1027.       </span>Inventory</a>
  1028.       </h4>
  1029.     </div>
  1030.     <div id="collapseFour" class="panel-collapse collapse">
  1031.       <div class="panel-body">
  1032.         <table class="table">
  1033.           <tr>
  1034.             <td>
  1035.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  1036.             </td>
  1037.           </tr>
  1038.         </table>
  1039.       </div>
  1040.     </div>
  1041.   </div>
  1042.  
  1043.   <div class="panel panel-default">
  1044.     <div class="panel-heading">
  1045.       <h4 class="panel-title">
  1046.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  1047.       </span>Production</a>
  1048.       </h4>
  1049.     </div>
  1050.     <div id="collapseFour" class="panel-collapse collapse">
  1051.       <div class="panel-body">
  1052.         <table class="table">
  1053.           <tr>
  1054.             <td>
  1055.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  1056.             </td>
  1057.           </tr>
  1058.         </table>
  1059.       </div>
  1060.     </div>
  1061.   </div>
  1062.  
  1063.     <div class="panel panel-default">
  1064.     <div class="panel-heading">
  1065.       <h4 class="panel-title">
  1066.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  1067.       </span>MRP</a>
  1068.       </h4>
  1069.     </div>
  1070.     <div id="collapseFour" class="panel-collapse collapse">
  1071.       <div class="panel-body">
  1072.         <table class="table">
  1073.           <tr>
  1074.             <td>
  1075.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  1076.             </td>
  1077.           </tr>
  1078.         </table>
  1079.       </div>
  1080.     </div>
  1081.   </div>
  1082.  
  1083.  
  1084. <div class="panel panel-default">
  1085.     <div class="panel-heading">
  1086.       <h4 class="panel-title">
  1087.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  1088.       </span>Service</a>
  1089.       </h4>
  1090.     </div>
  1091.     <div id="collapseFour" class="panel-collapse collapse">
  1092.       <div class="panel-body">
  1093.         <table class="table">
  1094.           <tr>
  1095.             <td>
  1096.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  1097.             </td>
  1098.           </tr>
  1099.         </table>
  1100.       </div>
  1101.     </div>
  1102.   </div>
  1103.  
  1104.   <div class="panel panel-default">
  1105.     <div class="panel-heading">
  1106.       <h4 class="panel-title">
  1107.       <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  1108.       </span>Human Resorces</a>
  1109.       </h4>
  1110.     </div>
  1111.     <div id="collapseFour" class="panel-collapse collapse">
  1112.       <div class="panel-body">
  1113.         <table class="table">
  1114.           <tr>
  1115.             <td>
  1116.               <span class="glyphicon glyphicon-shopping-cart"></span><a href="">Shopping Cart</a>
  1117.             </td>
  1118.           </tr>
  1119.         </table>
  1120.       </div>
  1121.     </div>
  1122.   </div>
  1123.  
  1124.  
  1125. </div>
  1126. </div>
  1127.  
  1128. <!-- for Accordion Menu -->
  1129. </div>
  1130. </div>
  1131. <!-- Middle Area -->
  1132.  
  1133. <div class="col-md-9">
  1134. <form action="">
  1135.  
  1136. <!-- Trigger the modal with a button -->
  1137. <button type="button" class="btn btn-danger btn-lg mdlFire"  data-target="#modal-3" >Click here to open modal</button>
  1138. <!-- Modal -->
  1139. <div class="modal  fade mymodal" id="modal-3"  role="dialog" style="padding-top: 45px;
  1140. float: right;
  1141. width: 25%;
  1142. right: 0px;
  1143. position: relative;
  1144. display: block;">
  1145.   <div class="">
  1146.    
  1147.     <!-- Modal content-->
  1148.     <div class= "modal-content">
  1149.       <div class="modal-header bg-primary" style="padding:0px 10px;">
  1150.         <button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
  1151.         <button class="close modalMinimize"> <i class='fa fa-minus'></i> </button>
  1152.         <h4 class="modal-title">Item Master Data</h4>
  1153.       </div>
  1154.       <div class="modal-body bg-default" >
  1155.        
  1156.             <div class="form-group">
  1157.             <label class="control-label col-sm-3" for="email"  style="padding-left: 0px;">Item Group:</label>
  1158.             <div class="col-sm-9">
  1159.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1160.             </div>
  1161.           </div>
  1162. <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1163.        
  1164.  
  1165.     </div>
  1166.     <div class="modal-footer"  style="padding:5px 15px;">
  1167.     </div>
  1168.    
  1169.   </div>
  1170.   </div>  <!--  Modal Dilog End -->
  1171. </div>
  1172. <!-- Modal -->
  1173.  
  1174. <!-- Trigger the modal with a button -->
  1175. <button type="button" class="btn btn-danger btn-lg mdlFire"  data-target="#modal-1" >Click here to open modal</button>
  1176. <!-- Modal -->
  1177. <div class="modal  fade mymodal" id="modal-1"  role="dialog" style="float: left;width: 75%;padding-right: 0px;">
  1178.   <div class="">
  1179.    
  1180.     <!-- Modal content-->
  1181.     <div class= "modal-content">
  1182.       <div class="modal-header bg-primary" style="padding:0px 10px;">
  1183.         <button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
  1184.         <button class="close modalMinimize"> <i class='fa fa-minus'></i> </button>
  1185.         <h4 class="modal-title">Item Master Data</h4>
  1186.       </div>
  1187.       <div class="modal-body bg-default" >
  1188.        
  1189.         <!-- Form Left Area -->
  1190.         <div class="">
  1191.            <div class="clearfix"></div>
  1192.           <div class="form-group" >
  1193.             <label class="control-label col-sm-3" for="email" style="padding-left: 0px;">Item Code:</label>
  1194.             <div class="col-sm-3">
  1195.               <input type="text" class="form-control input-sm" id="email"  placeholder="">
  1196.             </div>
  1197.           </div>
  1198.  
  1199.           <div class="form-group">
  1200.             <label class="control-label col-sm-2" for="email" style="padding-left: 5px;"  >Barcode:</label>
  1201.             <div class="col-sm-4">
  1202.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1203.             </div>
  1204.           </div>
  1205.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1206.            <div class="form-group">
  1207.             <label class="control-label col-sm-3" for="email" style="padding-left: 0px;" >Item Description:</label>
  1208.             <div class="col-sm-9">
  1209.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1210.             </div>
  1211.           </div>
  1212.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1213.  
  1214.            <div class="form-group">
  1215.             <label class="control-label col-sm-3" for="email"style="padding-left: 0px;"  >Category:</label>
  1216.             <div class="col-sm-9">
  1217.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1218.             </div>
  1219.           </div>          
  1220.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1221.            <div class="form-group">
  1222.             <label class="control-label col-sm-3" for="email" style="padding-left: 0px;" >Item Type:</label>
  1223.             <div class="col-sm-9">
  1224.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1225.             </div>
  1226.           </div>
  1227.  
  1228.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1229.            <div class="form-group">
  1230.             <label class="control-label col-sm-3" for="email"  style="padding-left: 0px;">Item Group:</label>
  1231.             <div class="col-sm-9">
  1232.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1233.             </div>
  1234.           </div>          
  1235.  
  1236.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1237.            <div class="form-group">
  1238.             <label class="control-label col-sm-3" for="email" style="padding-left: 0px;">Unit Price:</label>
  1239.             <div class="col-sm-9">
  1240.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1241.             </div>
  1242.           </div>
  1243.          <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1244.  
  1245.         </div>
  1246.         <!-- Form Left Area End-->
  1247.  
  1248.         <div class="clearfix"></div>
  1249.         <!-- Tab Menu  -->
  1250.  
  1251.  
  1252.           <ul class="nav nav-tabs ">
  1253.              <li><a data-toggle="tab" class="bg-deep" href="#General-tab" style="padding: 2px 10px;border-radius: 25px 0px 0px 0px; border: 1px solid #ddd;color:black;margin-right: 0px;">General</a></li>
  1254.              <li><a data-toggle="tab" class="bg-deep" href="#Purchasing-tab" style="padding: 2px 10px;border-radius: 25px 0px 0px 0px; border: 1px solid #ddd;color:black;margin-right: 0px;">Purchasing Data</a></li>
  1255.              <li><a data-toggle="tab" class="bg-deep" href="#Sales-tab" style="padding: 2px 10px;border-radius: 25px 0px 0px 0px; border: 1px solid #ddd;color:black;margin-right: 0px;">Sales Data</a></li>
  1256.              <li><a data-toggle="tab" class="bg-deep" href="#inventory-data-tab" style="padding: 2px 10px;border-radius: 25px 0px 0px 0px; border: 1px solid #ddd;color:black;margin-right: 0px;">Inventory Data</a></li>            
  1257.               <li><a data-toggle="tab" class="bg-deep" href="#Planning-data-tab" style="padding: 2px 10px;border-radius: 25px 0px 0px 0px; border: 1px solid #ddd;color:black;margin-right: 0px;">Planning Data</a></li>
  1258.              <li><a data-toggle="tab" class="bg-deep" href="#Propities-tab" style="padding: 2px 10px;border-radius: 25px 0px 0px 0px; border: 1px solid #ddd;color:black;margin-right: 0px;">Propities</a></li>
  1259.              <li><a data-toggle="tab" class="bg-deep" href="#remarks-tab" style="padding: 2px 10px;border-radius: 25px 0px 0px 0px; border: 1px solid #ddd;color:black;margin-right: 0px;">Remarks</a></li>
  1260.           </ul>
  1261.  
  1262.  
  1263.         <!-- Tab Menu  End-->
  1264.  
  1265.  
  1266.        
  1267.         <!-- Tab Content area -->
  1268.         <div class="tab-content">
  1269.  
  1270.  
  1271.  
  1272.  
  1273.  
  1274.         <!-- General Tab Start -->
  1275.           <div id="General-tab" class="tab-pane fade in active">
  1276.             <div class="form-group">
  1277.             <label class="control-label col-sm-5" for="Manufacturer">Manufacturer:</label>
  1278.             <div class="col-sm-7">
  1279.               <input type="text" class="form-control input-sm" id="Manufacturer" placeholder="">
  1280.             </div>
  1281.           </div>
  1282.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1283.           <div class="form-group">
  1284.             <label class="control-label col-sm-5" for="Additional-Identifier">Additional Identifier:</label>
  1285.             <div class="col-sm-7">
  1286.               <input type="text" class="form-control input-sm" id="Additional-Identifier" placeholder="">
  1287.             </div>
  1288.           </div>            
  1289.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1290.           <div class="form-group">
  1291.             <label class="control-label col-sm-5" for="Shipping-Type">Shipping Type:</label>
  1292.             <div class="col-sm-7">
  1293.               <input type="text" class="form-control input-sm" id="Shipping-Typer" placeholder="">
  1294.             </div>
  1295.           </div>
  1296.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1297.      
  1298.         </div>
  1299.         <!-- General Tab End -->        
  1300.  
  1301.  
  1302.  
  1303.  
  1304.         <!-- Purchasing Start -->
  1305.           <div id="Purchasing-tab" class="tab-pane fade in ">
  1306.             <div class="form-group">
  1307.             <label class="control-label col-sm-5" for="Purchasing-Unit">Purchasing Unit:</label>
  1308.             <div class="col-sm-7">
  1309.               <input type="text" class="form-control input-sm" id="Purchasing-Unit" placeholder="">
  1310.             </div>
  1311.           </div>
  1312.          <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1313.          <div class="form-group">
  1314.             <label class="control-label col-sm-5" for="Preferred-Vendor">Preferred Vendor:</label>
  1315.             <div class="col-sm-7">
  1316.               <input type="text" class="form-control input-sm" id="Preferred-Vendor" placeholder="">
  1317.             </div>
  1318.           </div>      
  1319.         </div>
  1320.         <!-- Purchasing Tab End -->
  1321.  
  1322.  
  1323.         <!-- Sales Tab  Start -->
  1324.           <div id="Sales-tab" class="tab-pane fade in ">
  1325.           <div class="form-group">
  1326.             <label class="control-label col-sm-5" for="Sales-Unit">Sales Unit:</label>
  1327.             <div class="col-sm-7">
  1328.               <input type="text" class="form-control input-sm" id="Sales-Unit" placeholder="">
  1329.             </div>
  1330.           </div>
  1331.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1332.                      
  1333.         </div>
  1334.         <!-- Sales Tab End -->
  1335.  
  1336.  
  1337.  
  1338. <!-- Inventory Data Tab Area Start -->
  1339.           <div id="inventory-data-tab" class="tab-pane fade in ">
  1340.  
  1341.           <div class="form-group">
  1342.             <label class="control-label col-sm-5" for="Inventory-Unit">Inventory Unit:</label>
  1343.             <div class="col-sm-7">
  1344.               <input type="text" class="form-control input-sm" id="Inventory-Unit" placeholder="">
  1345.             </div>
  1346.           </div>
  1347.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>          
  1348.  
  1349.           <div class="form-group">
  1350.             <label class="control-label col-sm-5" for="Minimum">Minimum:</label>
  1351.             <div class="col-sm-7">
  1352.               <input type="text" class="form-control input-sm" id="Minimum" placeholder="">
  1353.             </div>
  1354.           </div>
  1355.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1356.            
  1357.           <div class="form-group">
  1358.             <label class="control-label col-sm-5" for="Maximum">Maximum:</label>
  1359.             <div class="col-sm-7">
  1360.               <input type="text" class="form-control input-sm" id="Maximum" placeholder="">
  1361.             </div>
  1362.           </div>
  1363.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1364.                  
  1365.  
  1366.             <!-- Table In Form -->
  1367.             <table class="table table-bordered table-responsive ">
  1368.               <thead class="">
  1369.                 <tr>
  1370.                   <th>Firstname</th>
  1371.                   <th>Lastname</th>
  1372.                   <th>Email</th>
  1373.                   <th>Email</th>
  1374.                 </tr>
  1375.               </thead>
  1376.               <tbody class="bg-white">
  1377.                 <tr>
  1378.                   <td>John</td>
  1379.                   <td>Doe</td>
  1380.                   <td>john@example.com</td>
  1381.                   <td>john@example.com</td>
  1382.                 </tr>
  1383.               </tbody>
  1384.             </table>
  1385.             <div class="mb" style="margin-bottom: 5px"></div>
  1386.             <!-- Table In Form -->
  1387.           </div>  
  1388. <!-- Inventory Data Tab Area Start -->
  1389.  
  1390.  
  1391.         <!-- Propities Tab  Start -->
  1392.           <div id="Planning-data-tab" class="tab-pane fade in ">
  1393.             <div class="form-group">
  1394.             <label class="control-label col-sm-5" for="Minimum-Order-Qty">Minimum Order Qty:</label>
  1395.             <div class="col-sm-7">
  1396.               <input type="text" class="form-control input-sm" id="Minimum-Order-Qty" placeholder="">
  1397.             </div>
  1398.           </div>
  1399.            <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1400.  
  1401.    
  1402.         </div>
  1403.         <!-- Propities Tab End -->        
  1404.  
  1405.  
  1406.         <!-- Propities Tab  Start -->
  1407.           <div id="Propities-tab" class="tab-pane fade in ">
  1408.             <div class="form-group">
  1409.             <label class="control-label col-sm-5" for="email">Email:</label>
  1410.             <div class="col-sm-7">
  1411.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1412.             </div>
  1413.           </div>
  1414.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1415.  
  1416.           <div class="form-group">
  1417.             <label class="control-label col-sm-5" for="email">Email:</label>
  1418.             <div class="col-sm-7">
  1419.               <input type="text" class="form-control input-sm" id="email" placeholder="">
  1420.             </div>
  1421.           </div>
  1422.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1423.  
  1424.         </div>
  1425.         <!-- Propities Tab End -->
  1426.  
  1427.  
  1428.         <!-- Remarks Tab  Start -->
  1429.           <div id="remarks-tab" class="tab-pane fade in ">
  1430.             <div class="form-group">
  1431.             <div class="col-sm-12">
  1432.                 <textarea class="form-control input-sm" rows="5" ></textarea>
  1433.             </div>
  1434.           </div>
  1435.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1436.  
  1437.  
  1438.           <div class="clearfix border border-left-0 border-right-0 border-top-0 border-light"></div>
  1439.  
  1440.         </div>
  1441.         <!-- Remarks Tab End -->
  1442.  
  1443.  
  1444.  
  1445.  
  1446.         </div>
  1447.         <!-- Tab Content area End -->
  1448.        
  1449.        
  1450.         <div class="clearfix " ></div>
  1451.         <!-- Form Bottom Left Area -->
  1452.         <div class="pull-left col-md-6">
  1453.          
  1454.  
  1455.         <div class="clearfix"></div>
  1456.         <!-- Form Submit Button -->
  1457.         <div class="form-group ml-3">
  1458.           <button type="submit" class="btn btn-primary">Submit</button>
  1459.          
  1460.         </div>
  1461.         <!-- Form Submit Button End -->
  1462.       </form>
  1463.       <!-- Form End -->
  1464.     </div>
  1465.     <div class="modal-footer"  style="padding:5px 15px;">
  1466.     </div>
  1467.    
  1468.   </div>
  1469.   </div>  <!--  Modal Dilog End -->
  1470. </div>
  1471. <!-- Modal -->
  1472.  
  1473.  
  1474.  
  1475. </div>
  1476. <!-- Middle Area End-->
  1477. </div>
  1478. <div class="panel-footer"></div>
  1479. </div>
  1480. <div class="minmaxCon"></div>
  1481. </div>
  1482.  
  1483.  
  1484.  
  1485. <script>
  1486. $(document).ready(function(){
  1487.  
  1488. // For Dragable Item Using Jquiery Ui
  1489. $(".modal").draggable({
  1490. handle: ".modal-header"
  1491. });
  1492. // For Dragable Item Using Jquiery Ui
  1493. $(".panel").draggable({
  1494. handle: ".panel-heading"
  1495. });
  1496. // This Code For Select Current Item
  1497. $(document).on("click",".appDetails", function () {
  1498. var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
  1499. css("z-index", "1055");
  1500. });
  1501. var $content, $modal, $apnData, $modalCon;
  1502. $content = $(".min");
  1503. //To fire modal
  1504. $(".mdlFire").click(function(e){
  1505. e.preventDefault();
  1506. var $id = $(this).attr("data-target");
  1507. $($id).modal({backdrop: false, keyboard: false});
  1508. });
  1509.  
  1510. $(".modalMinimize").on("click", function(){
  1511. $modalCon = $(this).closest(".mymodal").attr("id");
  1512. $apnData = $(this).closest(".mymodal");
  1513. $modal = "#" + $modalCon;
  1514. $(".modal-backdrop").addClass("display-none");
  1515. $($modal).toggleClass("min");
  1516. if ( $($modal).hasClass("min") ){
  1517. $(".minmaxCon").append($apnData);
  1518. $(this).find("i").toggleClass( 'fa-minus').toggleClass( 'fa-clone');
  1519. }
  1520. else {
  1521. $(".container").append($apnData);
  1522. $(this).find("i").toggleClass( 'fa-clone').toggleClass( 'fa-minus');
  1523. };
  1524. });
  1525. $("button[data-dismiss='modal']").click(function(){
  1526. $(this).closest(".mymodal").removeClass("min");
  1527. $(".container").removeClass($apnData);
  1528. $(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass( 'fa fa-minus');
  1529. });
  1530. });
  1531. </script>
  1532. </body>
  1533. </html>
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!