API tools faq
paste
Advertisement
Guest User

login

a guest
Aug 4th, 2017
295
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.49 KB | None | 0 0
raw download clone embed print report
  1. <!-- INICIO login.html -->
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <title>Sistema Cripto</title>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link href="css/estilo.css" rel="stylesheet">
  10. </head>
  11. <body class="align login">
  12. <div class="grid" >
  13. <form class="form loginform">
  14.  
  15. <div class="form__field">
  16. <label for="username"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use></svg><span class="hidden">Username</span></label>
  17. <input type="text" name="username" id='username' class="form__input" placeholder="Usuario" required>
  18. </div>
  19.  
  20. <div class="form__field">
  21. <label for="password"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lock"></use></svg><span class="hidden">Password</span></label>
  22. <input type="password" id="password" name="password" class="form__input" placeholder="Password" required>
  23. </div>
  24.  
  25. <div class="form__field">
  26. <input type="button" id='btningresar' value="Ingresar">
  27. </div>
  28. </form>
  29. <br>
  30. <div id='contenedormensaje'>
  31. <div class="alert alert-danger alert-dismissible fade show" role="alert">
  32. <button type="button" class="close" id='close' style="right: 0px;">
  33. <span aria-hidden="true">&times;</span>
  34. </button>
  35. <strong>Atención!</strong><div id='mensaje'></div>
  36. </div>
  37. </div>
  38.  
  39. </div>
  40.  
  41. <svg xmlns="http://www.w3.org/2000/svg" class="icons"><symbol id="arrow-right" viewBox="0 0 1792 1792"><path d="M1600 960q0 54-37 91l-651 651q-39 37-91 37-51 0-90-37l-75-75q-38-38-38-91t38-91l293-293H245q-52 0-84.5-37.5T128 1024V896q0-53 32.5-90.5T245 768h704L656 474q-38-36-38-90t38-90l75-75q38-38 90-38 53 0 91 38l651 651q37 35 37 90z"/></symbol><symbol id="lock" viewBox="0 0 1792 1792"><path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z"/></symbol><symbol id="user" viewBox="0 0 1792 1792"><path d="M1600 1405q0 120-73 189.5t-194 69.5H459q-121 0-194-69.5T192 1405q0-53 3.5-103.5t14-109T236 1084t43-97.5 62-81 85.5-53.5T538 832q9 0 42 21.5t74.5 48 108 48T896 971t133.5-21.5 108-48 74.5-48 42-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-320-893q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z"/></symbol></svg>
  42.  
  43. </body>
  44. <script type="text/javascript" src='js/jquery-3.2.1.min.js' ></script>
  45. <script type="text/javascript" src='js/bootstrap.min.js'></script>
  46. <script>
  47. $('#contenedormensaje').hide();
  48.  
  49. var callback = function(){
  50. var username = $('#username').val();
  51. var password = $('#password').val();
  52. var user = JSON.parse(localStorage.getItem('user'));
  53. console.log("Usuario -> " + user.username + " password ->" + user.password );
  54. console.log( user, password, password );
  55.  
  56. if(username == user.username && password != user.password){
  57. $('#contenedormensaje').show();
  58. $('#mensaje').text("Por favor, ingrese su contraseña correctamente.");
  59. }else if(username != user.username && password != user.password){
  60. $('#contenedormensaje').show();
  61. $('#mensaje').text("El usuario no existe.");
  62. }else if(username == user.username && password == user.password){
  63. $('#contenedormensaje').hide();
  64. window.location.href = "index.html";
  65. }
  66. }
  67.  
  68. $('#btningresar').click(callback);
  69.  
  70. $(".login").keypress(function() {
  71. if (event.which == 13) callback();
  72. });
  73.  
  74. $('#close').click(function(){ $('#contenedormensaje').hide(); });
  75. </script>
  76.  
  77. </html>
  78.  
  79.  
  80.  
  81.  
  82. <!-- FIN login.html -->
  83.  
  84. <!-- INICIO estilo.css -->
  85.  
  86. /* loginform */
  87. .align {
  88. -webkit-box-align: center;
  89. -ms-flex-align: center;
  90. align-items: center;
  91. display: -webkit-box;
  92. display: -ms-flexbox;
  93. display: flex;
  94. -webkit-box-orient: vertical;
  95. -webkit-box-direction: normal;
  96. -ms-flex-direction: column;
  97. flex-direction: column;
  98. -webkit-box-pack: center;
  99. -ms-flex-pack: center;
  100. justify-content: center;
  101. }
  102.  
  103. /* helpers/grid.css */
  104.  
  105. .grid {
  106. margin-left: auto;
  107. margin-right: auto;
  108. max-width: 320px;
  109. max-width: 20rem;
  110. width: 90%;
  111. }
  112.  
  113. /* helpers/hidden.css */
  114.  
  115. .hidden {
  116. border: 0;
  117. clip: rect(0 0 0 0);
  118. height: 1px;
  119. margin: -1px;
  120. overflow: hidden;
  121. padding: 0;
  122. position: absolute;
  123. width: 1px;
  124. }
  125.  
  126. /* helpers/icon.css */
  127.  
  128. .icons {
  129. display: none;
  130. }
  131.  
  132. .icon {
  133. display: inline-block;
  134. fill: #606468;
  135. font-size: 16px;
  136. font-size: 1rem;
  137. height: 1em;
  138. vertical-align: middle;
  139. width: 1em;
  140. }
  141.  
  142. /* layout/base.css */
  143.  
  144. * {
  145. box-sizing: inherit;
  146. }
  147.  
  148. html {
  149. box-sizing: border-box;
  150. font-size: 100%;
  151. height: 100%;
  152. }
  153.  
  154. body {
  155. background-color: #2c3338;
  156. color: #606468;
  157. font-family: 'Open Sans', sans-serif;
  158. font-size: 14px;
  159. font-size: 0.875rem;
  160. font-weight: 400;
  161. height: 100%;
  162. line-height: 1.5;
  163. margin: 0;
  164. min-height: 100%;
  165. }
  166.  
  167. /* modules/anchor.css */
  168.  
  169. a {
  170. color: #eee;
  171. outline: 0;
  172. text-decoration: none;
  173. }
  174.  
  175. a:focus,
  176. a:hover {
  177. text-decoration: underline;
  178. }
  179.  
  180. /* modules/form.css */
  181.  
  182. input {
  183. background-image: none;
  184. border: 0;
  185. color: inherit;
  186. font: inherit;
  187. margin: 0;
  188. outline: 0;
  189. padding: 0;
  190. -webkit-transition: background-color 0.3s;
  191. transition: background-color 0.3s;
  192. }
  193.  
  194. input[type='button'] {
  195. cursor: pointer;
  196. }
  197.  
  198. .form {
  199. margin: -14px;
  200. margin: -0.875rem;
  201. }
  202.  
  203. .form input[type='password'],
  204. .form input[type='text'],
  205. .form input[type='button'] {
  206. width: 100%;
  207. }
  208.  
  209. .form__field {
  210. display: -webkit-box;
  211. display: -ms-flexbox;
  212. display: flex;
  213. margin: 14px;
  214. margin: 0.875rem;
  215. }
  216.  
  217. .form__input {
  218. -webkit-box-flex: 1;
  219. -ms-flex: 1;
  220. flex: 1;
  221. }
  222.  
  223. /* modules/loginform.css */
  224.  
  225. .loginform {
  226. color: #eee;
  227. }
  228.  
  229. .loginform label,
  230. .loginform input[type='text'],
  231. .loginform input[type='password'],
  232. .loginform input[type='button'] {
  233. border-radius: 0.25rem;
  234. padding: 16px;
  235. padding: 1rem;
  236. }
  237.  
  238. .loginform label {
  239. background-color: #363b41;
  240. border-bottom-right-radius: 0;
  241. border-top-right-radius: 0;
  242. padding-left: 20px;
  243. padding-left: 1.25rem;
  244. padding-right: 20px;
  245. padding-right: 1.25rem;
  246. }
  247.  
  248. .loginform input[type='password'],
  249. .loginform input[type='text'] {
  250. background-color: #3b4148;
  251. border-bottom-left-radius: 0;
  252. border-top-left-radius: 0;
  253. }
  254.  
  255. .loginform input[type='password']:focus,
  256. .loginform input[type='password']:hover,
  257. .loginform input[type='text']:focus,
  258. .loginform input[type='text']:hover {
  259. background-color: #434a52;
  260. }
  261.  
  262. .loginform input[type='button'] {
  263. background-color: #1e88e5;
  264. color: #eee;
  265. font-weight: 700;
  266. text-transform: uppercase;
  267. }
  268.  
  269. .loginform input[type='button']:focus,
  270. .loginform input[type='button']:hover {
  271. background-color: #1e88e5;
  272. }
  273.  
  274. /* modules/text.css */
  275.  
  276. p {
  277. margin-bottom: 24px;
  278. margin-bottom: 1.5rem;
  279. margin-top: 24px;
  280. margin-top: 1.5rem;
  281. }
  282.  
  283. .text--center {
  284. text-align: center;
  285. }
  286. /* FIN loginform */
  287.  
  288. /* DIV ERROR loginform */
  289.  
  290. .alert-danger, .alert-error {
  291. color: #E9EDEF;
  292. background-color: rgba(231,76,60,.88);
  293. border-color: rgba(231,76,60,.88);}
  294.  
  295. .alert-dismissable, .alert-dismissible {
  296. padding-right: 35px;
  297. }
  298. .alert {
  299. padding: 15px;
  300. margin-bottom: 20px;
  301. border: 1px solid transparent;
  302. border-radius: 4px;
  303. }
  304. .close:focus, .close:hover {
  305. color: #000;
  306. text-decoration: none;
  307. cursor: pointer;
  308. filter: alpha(opacity=50);
  309. opacity: .5;
  310. }
  311.  
  312.  
  313. .alert-dismissable .close, .alert-dismissible .close {
  314. position: relative;
  315. top: -2px;
  316. right: -21px;
  317. color: inherit;
  318. }
  319. button.close {
  320. -webkit-appearance: none;
  321. padding: 0;
  322. cursor: pointer;
  323. background: 0 0;
  324. border: 0;
  325. }
  326. .close {
  327. float: right;
  328. font-size: 21px;
  329. font-weight: 700;
  330. line-height: 1;
  331. color: #000;
  332. text-shadow: 0 1px 0 #fff;
  333. filter: alpha(opacity=20);
  334. opacity: .2;
  335. }
  336.  
  337.  
  338. <!-- FIN estilo.css -->
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!