index.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="theme-color" content="#205081" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <link rel="stylesheet" href="/assets/sys/bootstrap.css">
  8. <link rel="stylesheet" href="/assets/sys/styles.css">
  9. <style type="text/css">
  10. body.cp {
  11. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  12. background: initial;
  13. background-color: #fff;
  14. font-size: 1rem;
  15. font-weight: 400;
  16. line-height: 1.5;
  17. color: #212529;
  18. width: 100%;
  19. height: 100%;
  20. overflow: hidden;
  21. }
  22. body.cp nav.main {
  23. height: 56px;
  24. }
  25. body.cp .wrap {
  26. width: 100%;
  27. height: 100%;
  28. display: table;
  29. align-items: stretch;
  30. }
  31. body.cp .wrap .sidebar,
  32. body.cp .wrap .content {
  33. display: table-cell;
  34. position: relative;
  35. padding-top: 56px;
  36. }
  37. body.cp .wrap .sidebar {
  38. display: none;
  39. }
  40. body.cp.cp-sidebar-left .wrap .sidebar.sidebar-left {
  41. display: table-cell;
  42. }
  43. body.cp.cp-sidebar-right .wrap .sidebar.sidebar-right {
  44. display: table-cell;
  45. }
  46. body.cp .wrap .sidebar .padd,
  47. body.cp .wrap .content .padd {
  48. padding: .5rem 1rem;
  49. }
  50. body.cp .wrap .scroll {
  51. height: 100%;
  52. overflow: hidden;
  53. overflow-y: auto;
  54. }
  55. body.cp .wrap .sidebar {
  56. width: 245px;
  57. background: #eee;
  58. box-shadow: 0 0.5em 0.5em rgba(0,0,0,.3);
  59. }
  60. body.cp .wrap .content {
  61. /**/
  62. }
  63. body.cp .wrap .sidebar.sidebar-right {
  64. /**/
  65. }
  66. </style>
  67. <title>Control Panel</title>
  68. <link rel="shortcut icon" href="/assets/sys/fave.ico" type="image/x-icon" />
  69. </head>
  70. <body class="cp cp-sidebar-left cp-sidebar-right">
  71. <nav class="navbar main navbar-expand-md navbar-dark fixed-top bg-dark">
  72. <a class="navbar-brand" href="/">Control Panel</a>
  73. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  74. <span class="navbar-toggler-icon"></span>
  75. </button>
  76. <div class="collapse navbar-collapse" id="navbarCollapse">
  77. <ul class="navbar-nav mr-auto">
  78. <li class="nav-item dropdown">
  79. <a class="nav-link dropdown-toggle" href="javascript:;" id="nbModulesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  80. Modules
  81. </a>
  82. <div class="dropdown-menu" aria-labelledby="nbModulesDropdown">
  83. <a class="dropdown-item" href="#">Pages</a>
  84. </div>
  85. </li>
  86. <li class="nav-item dropdown">
  87. <a class="nav-link dropdown-toggle" href="javascript:;" id="nbSystemDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  88. System
  89. </a>
  90. <div class="dropdown-menu" aria-labelledby="nbSystemDropdown">
  91. <a class="dropdown-item" href="#">Users</a>
  92. <div class="dropdown-divider"></div>
  93. <a class="dropdown-item" href="#">Settings</a>
  94. </div>
  95. </li>
  96. </ul>
  97. <ul class="navbar-nav ml-auto">
  98. <li class="nav-item dropdown">
  99. <a class="nav-link dropdown-toggle" href="javascript:;" id="nbAccountDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  100. example@example.com
  101. </a>
  102. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nbAccountDropdown">
  103. <a class="dropdown-item" href="#">Change password</a>
  104. <div class="dropdown-divider"></div>
  105. <a class="dropdown-item" href="#">Settings</a>
  106. <a class="dropdown-item" href="#">Sing out</a>
  107. </div>
  108. </li>
  109. </ul>
  110. </div>
  111. </nav>
  112. <div class="wrap">
  113. <div class="sidebar sidebar-left">
  114. <div class="scroll">
  115. <div class="padd">
  116. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  117. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  118. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  119. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  120. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  121. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  122. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  123. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  124. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  125. </div>
  126. </div>
  127. </div>
  128. <div class="content">
  129. <div class="scroll">
  130. <div class="padd">
  131. Start. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  132. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  133. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  134. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  135. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  136. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  137. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  138. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  139. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  140. Some content<br />Some content<br />Some content<br />Some content<br />Some content. End.
  141. </div>
  142. </div>
  143. </div>
  144. <div class="sidebar sidebar-right">
  145. <div class="scroll">
  146. <div class="padd">
  147. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  148. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  149. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  150. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  151. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  152. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  153. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  154. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  155. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  156. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. <script src="/assets/sys/jquery.js"></script>
  162. <script src="/assets/sys/popper.js"></script>
  163. <script src="/assets/sys/bootstrap.js"></script>
  164. </body>
  165. </html>