register-v2.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <!doctype html>
  2. <html lang="en">
  3. <!--begin::Head-->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>AdminLTE 4 | Register Page v2</title>
  7. <!--begin::Accessibility Meta Tags-->
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  9. <meta name="color-scheme" content="light dark" />
  10. <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
  11. <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
  12. <!--end::Accessibility Meta Tags-->
  13. <!--begin::Primary Meta Tags-->
  14. <meta name="title" content="AdminLTE 4 | Register Page v2" />
  15. <meta name="author" content="ColorlibHQ" />
  16. <meta
  17. name="description"
  18. content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
  19. />
  20. <meta
  21. name="keywords"
  22. content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
  23. />
  24. <!--end::Primary Meta Tags-->
  25. <!--begin::Accessibility Features-->
  26. <!-- Skip links will be dynamically added by accessibility.js -->
  27. <meta name="supported-color-schemes" content="light dark" />
  28. <link rel="preload" href="../css/adminlte.css" as="style" />
  29. <!--end::Accessibility Features-->
  30. <!--begin::Fonts-->
  31. <link
  32. rel="stylesheet"
  33. href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
  34. integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
  35. crossorigin="anonymous"
  36. media="print"
  37. onload="this.media = 'all'"
  38. />
  39. <!--end::Fonts-->
  40. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  41. <link
  42. rel="stylesheet"
  43. href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
  44. crossorigin="anonymous"
  45. />
  46. <!--end::Third Party Plugin(OverlayScrollbars)-->
  47. <!--begin::Third Party Plugin(Bootstrap Icons)-->
  48. <link
  49. rel="stylesheet"
  50. href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
  51. crossorigin="anonymous"
  52. />
  53. <!--end::Third Party Plugin(Bootstrap Icons)-->
  54. <!--begin::Required Plugin(AdminLTE)-->
  55. <link rel="stylesheet" href="../css/adminlte.css" />
  56. <!--end::Required Plugin(AdminLTE)-->
  57. </head>
  58. <!--end::Head-->
  59. <!--begin::Body-->
  60. <body class="register-page bg-body-secondary">
  61. <div class="register-box">
  62. <!-- /.register-logo -->
  63. <div class="card card-outline card-primary">
  64. <div class="card-header">
  65. <a
  66. href="../index2.html"
  67. class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover"
  68. >
  69. <h1 class="mb-0"><b>Admin</b>LTE</h1>
  70. </a>
  71. </div>
  72. <div class="card-body register-card-body">
  73. <p class="register-box-msg">Register a new membership</p>
  74. <form action="../index3.html" method="post">
  75. <div class="input-group mb-1">
  76. <div class="form-floating">
  77. <input id="registerFullName" type="text" class="form-control" placeholder="" />
  78. <label for="registerFullName">Full Name</label>
  79. </div>
  80. <div class="input-group-text">
  81. <span class="bi bi-person"></span>
  82. </div>
  83. </div>
  84. <div class="input-group mb-1">
  85. <div class="form-floating">
  86. <input id="registerEmail" type="email" class="form-control" placeholder="" />
  87. <label for="registerEmail">Email</label>
  88. </div>
  89. <div class="input-group-text">
  90. <span class="bi bi-envelope"></span>
  91. </div>
  92. </div>
  93. <div class="input-group mb-1">
  94. <div class="form-floating">
  95. <input id="registerPassword" type="password" class="form-control" placeholder="" />
  96. <label for="registerPassword">Password</label>
  97. </div>
  98. <div class="input-group-text">
  99. <span class="bi bi-lock-fill"></span>
  100. </div>
  101. </div>
  102. <!--begin::Row-->
  103. <div class="row">
  104. <div class="col-8 d-inline-flex align-items-center">
  105. <div class="form-check">
  106. <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
  107. <label class="form-check-label" for="flexCheckDefault">
  108. I agree to the <a href="#">terms</a>
  109. </label>
  110. </div>
  111. </div>
  112. <!-- /.col -->
  113. <div class="col-4">
  114. <div class="d-grid gap-2">
  115. <button type="submit" class="btn btn-primary">Sign In</button>
  116. </div>
  117. </div>
  118. <!-- /.col -->
  119. </div>
  120. <!--end::Row-->
  121. </form>
  122. <div class="social-auth-links text-center mb-3 d-grid gap-2">
  123. <p>- OR -</p>
  124. <a href="#" class="btn btn-primary">
  125. <i class="bi bi-facebook me-2"></i> Sign in using Facebook
  126. </a>
  127. <a href="#" class="btn btn-danger">
  128. <i class="bi bi-google me-2"></i> Sign in using Google+
  129. </a>
  130. </div>
  131. <!-- /.social-auth-links -->
  132. <p class="mb-0">
  133. <a href="login.html" class="link-primary text-center"> I already have a membership </a>
  134. </p>
  135. </div>
  136. <!-- /.register-card-body -->
  137. </div>
  138. </div>
  139. <!-- /.register-box -->
  140. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  141. <script
  142. src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
  143. crossorigin="anonymous"
  144. ></script>
  145. <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
  146. <script
  147. src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  148. crossorigin="anonymous"
  149. ></script>
  150. <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
  151. <script
  152. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
  153. crossorigin="anonymous"
  154. ></script>
  155. <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
  156. <script src="../js/adminlte.js"></script>
  157. <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
  158. <script>
  159. const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
  160. const Default = {
  161. scrollbarTheme: 'os-theme-light',
  162. scrollbarAutoHide: 'leave',
  163. scrollbarClickScroll: true,
  164. };
  165. document.addEventListener('DOMContentLoaded', function () {
  166. const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
  167. // Disable OverlayScrollbars on mobile devices to prevent touch interference
  168. const isMobile = window.innerWidth <= 992;
  169. if (
  170. sidebarWrapper &&
  171. OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
  172. !isMobile
  173. ) {
  174. OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
  175. scrollbars: {
  176. theme: Default.scrollbarTheme,
  177. autoHide: Default.scrollbarAutoHide,
  178. clickScroll: Default.scrollbarClickScroll,
  179. },
  180. });
  181. }
  182. });
  183. </script>
  184. <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
  185. <script>
  186. (() => {
  187. 'use strict';
  188. const STORAGE_KEY = 'lte-theme';
  189. const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
  190. const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
  191. const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
  192. const getPreferredTheme = () => {
  193. const stored = getStoredTheme();
  194. if (stored) return stored;
  195. return prefersDark() ? 'dark' : 'light';
  196. };
  197. const setTheme = (theme) => {
  198. const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
  199. document.documentElement.setAttribute('data-bs-theme', resolved);
  200. };
  201. setTheme(getPreferredTheme());
  202. const showActiveTheme = (theme) => {
  203. // Highlight the active dropdown option
  204. document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
  205. el.classList.remove('active');
  206. el.setAttribute('aria-pressed', 'false');
  207. const check = el.querySelector('.bi-check-lg');
  208. if (check) check.classList.add('d-none');
  209. });
  210. const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
  211. if (active) {
  212. active.classList.add('active');
  213. active.setAttribute('aria-pressed', 'true');
  214. const check = active.querySelector('.bi-check-lg');
  215. if (check) check.classList.remove('d-none');
  216. }
  217. // Sync the topbar trigger icon
  218. document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
  219. icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
  220. });
  221. };
  222. globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  223. const stored = getStoredTheme();
  224. if (!stored || stored === 'auto') setTheme(getPreferredTheme());
  225. });
  226. document.addEventListener('DOMContentLoaded', () => {
  227. showActiveTheme(getPreferredTheme());
  228. document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
  229. toggle.addEventListener('click', () => {
  230. const theme = toggle.getAttribute('data-bs-theme-value');
  231. setStoredTheme(theme);
  232. setTheme(theme);
  233. showActiveTheme(theme);
  234. });
  235. });
  236. });
  237. })();
  238. </script>
  239. <!--end::Color Mode Toggle-->
  240. <!--end::Script-->
  241. </body>
  242. <!--end::Body-->
  243. </html>