index.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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. background: initial;
  12. background-color: #fff;
  13. 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";
  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. display: table;
  27. align-items: stretch;
  28. width: 100%;
  29. height: 100%;
  30. }
  31. body.cp .wrap .sidebar,
  32. body.cp .wrap .content {
  33. display: table-cell;
  34. padding-top: 56px;
  35. position: relative;
  36. }
  37. body.cp .wrap .sidebar .padd,
  38. body.cp .wrap .content .padd {
  39. padding: .5rem 1rem;
  40. }
  41. body.cp .wrap .scroll {
  42. height: 100%;
  43. overflow: hidden;
  44. overflow-y: auto;
  45. }
  46. body.cp .wrap .sidebar {
  47. background: #eee;
  48. width: 245px;
  49. box-shadow: 0 0.5em 0.5em rgba(0,0,0,.3);
  50. }
  51. body.cp .wrap .content {
  52. /**/
  53. }
  54. body.cp .wrap .sidebar.sidebar-right {
  55. /**/
  56. }
  57. </style>
  58. <title>Control Panel</title>
  59. <link rel="shortcut icon" href="/assets/sys/fave.ico" type="image/x-icon" />
  60. </head>
  61. <body class="cp">
  62. <nav class="navbar main navbar-expand-md navbar-dark fixed-top bg-dark">
  63. <a class="navbar-brand" href="/">Control Panel</a>
  64. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  65. <span class="navbar-toggler-icon"></span>
  66. </button>
  67. <div class="collapse navbar-collapse" id="navbarCollapse">
  68. <ul class="navbar-nav mr-auto">
  69. <li class="nav-item dropdown">
  70. <a class="nav-link dropdown-toggle" href="#" id="nbModulesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  71. Modules
  72. </a>
  73. <div class="dropdown-menu" aria-labelledby="nbModulesDropdown">
  74. <a class="dropdown-item" href="#">Pages</a>
  75. </div>
  76. </li>
  77. <li class="nav-item dropdown">
  78. <a class="nav-link dropdown-toggle" href="#" id="nbSystemDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  79. System
  80. </a>
  81. <div class="dropdown-menu" aria-labelledby="nbSystemDropdown">
  82. <a class="dropdown-item" href="#">Users</a>
  83. <div class="dropdown-divider"></div>
  84. <a class="dropdown-item" href="#">Settings</a>
  85. </div>
  86. </li>
  87. </ul>
  88. <ul class="navbar-nav ml-auto">
  89. <li class="nav-item dropdown">
  90. <a class="nav-link dropdown-toggle" href="#" id="nbAccountDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  91. example@example.com
  92. </a>
  93. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nbAccountDropdown">
  94. <a class="dropdown-item" href="#">Change password</a>
  95. <div class="dropdown-divider"></div>
  96. <a class="dropdown-item" href="#">Settings</a>
  97. <a class="dropdown-item" href="#">Sing out</a>
  98. </div>
  99. </li>
  100. </ul>
  101. </div>
  102. </nav>
  103. <div class="wrap">
  104. <div class="sidebar sidebar-left">
  105. <div class="scroll">
  106. <div class="padd">
  107. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  108. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  109. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  110. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  111. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  112. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  113. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  114. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  115. Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />Sidebar left<br />
  116. </div>
  117. </div>
  118. </div>
  119. <div class="content">
  120. <div class="scroll">
  121. <div class="padd">
  122. Start. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  123. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  124. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  125. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  126. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  127. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  128. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  129. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  130. Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
  131. Some content<br />Some content<br />Some content<br />Some content<br />Some content. End.
  132. </div>
  133. </div>
  134. </div>
  135. <div class="sidebar sidebar-right">
  136. <div class="scroll">
  137. <div class="padd">
  138. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  139. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  140. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  141. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  142. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  143. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  144. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  145. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  146. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  147. Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />Sidebar right<br />
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <script src="/assets/sys/jquery.js"></script>
  153. <script src="/assets/sys/popper.js"></script>
  154. <script src="/assets/sys/bootstrap.js"></script>
  155. </body>
  156. </html>