You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

125 lines
3.7 KiB

9 years ago
9 years ago
9 years ago
9 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Standard Meta -->
  5. <meta charset="utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  8. <!-- Site Properities -->
  9. <title>Login Example - Semantic</title>
  10. <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
  11. <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
  12. <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
  13. <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
  14. <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
  15. <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
  16. <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
  17. <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
  18. <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
  19. <link rel="stylesheet" type="text/css" href="../dist/components/form.css">
  20. <link rel="stylesheet" type="text/css" href="../dist/components/input.css">
  21. <link rel="stylesheet" type="text/css" href="../dist/components/button.css">
  22. <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
  23. <link rel="stylesheet" type="text/css" href="../dist/components/message.css">
  24. <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
  25. <script src="assets/library/jquery.min.js"></script>
  26. <script src="../dist/components/form.js"></script>
  27. <script src="../dist/components/transition.js"></script>
  28. <style type="text/css">
  29. body {
  30. background-color: #DADADA;
  31. }
  32. body > .grid {
  33. height: 100%;
  34. }
  35. .image {
  36. margin-top: -100px;
  37. }
  38. .column {
  39. max-width: 450px;
  40. }
  41. </style>
  42. <script>
  43. $(document)
  44. .ready(function() {
  45. $('.ui.form')
  46. .form({
  47. fields: {
  48. email: {
  49. identifier : 'email',
  50. rules: [
  51. {
  52. type : 'empty',
  53. prompt : 'Please enter your e-mail'
  54. },
  55. {
  56. type : 'email',
  57. prompt : 'Please enter a valid e-mail'
  58. }
  59. ]
  60. },
  61. password: {
  62. identifier : 'password',
  63. rules: [
  64. {
  65. type : 'empty',
  66. prompt : 'Please enter your password'
  67. },
  68. {
  69. type : 'length[6]',
  70. prompt : 'Your password must be at least 6 characters'
  71. }
  72. ]
  73. }
  74. }
  75. })
  76. ;
  77. })
  78. ;
  79. </script>
  80. </head>
  81. <body>
  82. <div class="ui middle aligned center aligned grid">
  83. <div class="column">
  84. <h2 class="ui teal image header">
  85. <img src="assets/images/logo.png" class="image">
  86. <div class="content">
  87. Log-in to your account
  88. </div>
  89. </h2>
  90. <form class="ui large form">
  91. <div class="ui stacked segment">
  92. <div class="field">
  93. <div class="ui left icon input">
  94. <i class="user icon"></i>
  95. <input type="text" name="email" placeholder="E-mail address">
  96. </div>
  97. </div>
  98. <div class="field">
  99. <div class="ui left icon input">
  100. <i class="lock icon"></i>
  101. <input type="password" name="password" placeholder="Password">
  102. </div>
  103. </div>
  104. <div class="ui fluid large teal submit button">Login</div>
  105. </div>
  106. <div class="ui error message"></div>
  107. </form>
  108. <div class="ui message">
  109. New to us? <a href="#">Sign Up</a>
  110. </div>
  111. </div>
  112. </div>
  113. </body>
  114. </html>