Advertisement
Guest User

Untitled

a guest
Dec 18th, 2016
123
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.85 KB | None | 0 0
  1. html:
  2.  
  3. <html>
  4. <STYLE>
  5. A {text-decoration: none;}
  6. A:Hover {text-decoration: underline;}
  7. C:Hover {
  8. text-shadow: 2px 2px 10px #70D97F;}
  9. </STYLE>
  10. <head>
  11. <title>Klassen Login</title>
  12. <!-- Include CSS File Here -->
  13. <link rel="stylesheet" href="css/style.css"/>
  14.  
  15. <!-- Include JS File Here -->
  16. <script src="js/login.js"></script>
  17. </head>
  18.  
  19. <body background="img/bg.jpg">
  20.  
  21.  
  22. <div class="container">
  23. <div class="main">
  24. <h2>Klassen Login</h2>
  25. <form id="form_id" method="post" name="myform">
  26. <label>Benutzername :</label>
  27. <input type="text" name="username" id="username"/>
  28. <label>Passwort :</label>
  29. <input type="password" name="password" id="password"/>
  30. <input type="button" value="Login" id="submit" onclick="validate()"/>
  31. </form>
  32. <span><b class="note">Notiz : </b> Bitte Benutze Folgende Daten <br/><b class="valid">Benutzername : Lucas<br/>Passwort : 10IF</b></span><br>
  33. <center>
  34. <a href="index.html" class="btn btn-default btn-lg">Zurück</a>
  35. </center>
  36. </div>
  37. </div>
  38. </body>
  39. </html>
  40.  
  41. css:
  42.  
  43.  
  44. /* Below line is used for online Google font */
  45. @import url(https://fonts.googleapis.com/css?family=Raleway);
  46.  
  47. a {
  48. color: #FA862E;
  49. }
  50.  
  51.  
  52. h2{
  53.  
  54. padding: 35px 30px;
  55. margin: -10px -50px;
  56. text-align:center;
  57. border-radius: 50px 50px 0 0;
  58. }
  59. hr{
  60. margin: 10px -50px;
  61. border: 0;
  62. border-top: 1px solid #ccc;
  63. margin-bottom: 40px;
  64. }
  65. div.container{
  66. width: 430px;
  67. height: 610px;
  68. margin:35px auto;
  69. font-family: 'Raleway', sans-serif;
  70. }
  71. div.main{
  72. width: 300px;
  73. padding: 10px 50px 25px;
  74. border: 2px solid gray;
  75. border-radius: 50px;
  76. font-family: raleway;
  77. float:left;
  78. margin-top:50px;
  79.  
  80.  
  81. }
  82.  
  83.  
  84.  
  85. input[type=text],input[type=password]{
  86. width: 100%;
  87. height: 40px;
  88. padding: 5px;
  89. margin-bottom: 25px;
  90. margin-top: 5px;
  91. border: 2px solid #ccc;
  92. color: #4f4f4f;
  93. font-size: 16px;
  94. border-radius: 5px;
  95. }
  96. label{
  97. color: #464646;
  98. text-shadow: 0 1px 0 #fff;
  99. font-size: 14px;
  100. font-weight: bold;
  101. }
  102. center{
  103. font-size:32px;
  104. }
  105. .note{
  106. color:red;
  107. }
  108. .valid{
  109. color:green;
  110. }
  111. .back{
  112. text-decoration: none;
  113. border: 8px solid rgb(0, 143, 255);
  114. background-color: rgb(0, 214, 255);
  115. padding: 3px 20px;
  116. border-radius: 2px;
  117. color: black;
  118. }
  119. input[type=button]{
  120. font-size: 16px;
  121. background: linear-gradient(#c3e580 5%, #c3e580 100%);
  122. border: 1px solid #c3e580;
  123. color: #4E4D4B;
  124. font-weight: bold;
  125. cursor: pointer;
  126. width: 100%;
  127. border-radius: 5px;
  128. padding: 10px 0;
  129. outline:none;
  130. }
  131. input[type=button]:hover{
  132. background: linear-gradient(#a2c659 5%, #a2c659 100%);
  133. border: 1px solid #a2c659;
  134. }
  135.  
  136.  
  137. #bck
  138. {
  139. height:;
  140. width:;
  141. top:440;
  142. left:560px;
  143. border:0px solid #000000;
  144. background-color:transparent;
  145. text-align:center;
  146. cursor: pointer;
  147.  
  148. }
  149. .btn {
  150. display: inline-block;
  151. padding: 6px 12px;
  152. margin-bottom: 0;
  153. font-size: 14px;
  154. font-weight: normal;
  155. line-height: 1.42857143;
  156. text-align: center;
  157. white-space: nowrap;
  158. vertical-align: middle;
  159. -ms-touch-action: manipulation;
  160. touch-action: manipulation;
  161. cursor: pointer;
  162. -webkit-user-select: none;
  163. -moz-user-select: none;
  164. -ms-user-select: none;
  165. user-select: none;
  166. background-image: none;
  167. border: 1px solid transparent;
  168. border-radius: 4px;
  169. }
  170. .btn:focus,
  171. .btn:active:focus,
  172. .btn.active:focus,
  173. .btn.focus,
  174. .btn:active.focus,
  175. .btn.active.focus {
  176. outline: 5px auto -webkit-focus-ring-color;
  177. outline-offset: -2px;
  178. }
  179. .btn:hover,
  180. .btn:focus,
  181. .btn.focus {
  182. color: #333;
  183. text-decoration: none;
  184. }
  185. .btn:active,
  186. .btn.active {
  187. background-image: none;
  188. outline: 0;
  189. -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  190. box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  191. }
  192. .btn.disabled,
  193. .btn[disabled],
  194. fieldset[disabled] .btn {
  195. cursor: not-allowed;
  196. filter: alpha(opacity=65);
  197. -webkit-box-shadow: none;
  198. box-shadow: none;
  199. opacity: .65;
  200. }
  201. a.btn.disabled,
  202. fieldset[disabled] a.btn {
  203. pointer-events: none;
  204. }
  205. .btn-default {
  206. color: #333;
  207. background-color: #fff;
  208. border-color: #ccc;
  209. }
  210. .btn-default:focus,
  211. .btn-default.focus {
  212. color: #333;
  213. background-color: #e6e6e6;
  214. border-color: #8c8c8c;
  215. }
  216. .btn-default:hover {
  217. color: #333;
  218. background-color: #e6e6e6;
  219. border-color: #adadad;
  220. }
  221. .btn-default:active,
  222. .btn-default.active,
  223. .open > .dropdown-toggle.btn-default {
  224. color: #333;
  225. background-color: #e6e6e6;
  226. border-color: #adadad;
  227. }
  228. .btn-default:active:hover,
  229. .btn-default.active:hover,
  230. .open > .dropdown-toggle.btn-default:hover,
  231. .btn-default:active:focus,
  232. .btn-default.active:focus,
  233. .open > .dropdown-toggle.btn-default:focus,
  234. .btn-default:active.focus,
  235. .btn-default.active.focus,
  236. .open > .dropdown-toggle.btn-default.focus {
  237. color: #333;
  238. background-color: #d4d4d4;
  239. border-color: #8c8c8c;
  240. }
  241. .btn-default:active,
  242. .btn-default.active,
  243. .open > .dropdown-toggle.btn-default {
  244. background-image: none;
  245. }
  246. .btn-default.disabled:hover,
  247. .btn-default[disabled]:hover,
  248. fieldset[disabled] .btn-default:hover,
  249. .btn-default.disabled:focus,
  250. .btn-default[disabled]:focus,
  251. fieldset[disabled] .btn-default:focus,
  252. .btn-default.disabled.focus,
  253. .btn-default[disabled].focus,
  254. fieldset[disabled] .btn-default.focus {
  255. background-color: #fff;
  256. border-color: #ccc;
  257. }
  258. .btn-default .badge {
  259. color: #fff;
  260. background-color: #333;
  261. }
  262. .btn-primary {
  263. color: #fff;
  264. background-color: #337ab7;
  265. border-color: #2e6da4;
  266. }
  267. .btn-primary:focus,
  268. .btn-primary.focus {
  269. color: #fff;
  270. background-color: #286090;
  271. border-color: #122b40;
  272. }
  273. .btn-primary:hover {
  274. color: #fff;
  275. background-color: #286090;
  276. border-color: #204d74;
  277. }
  278. .btn-primary:active,
  279. .btn-primary.active,
  280. .open > .dropdown-toggle.btn-primary {
  281. color: #fff;
  282. background-color: #286090;
  283. border-color: #204d74;
  284. }
  285. .btn-primary:active:hover,
  286. .btn-primary.active:hover,
  287. .open > .dropdown-toggle.btn-primary:hover,
  288. .btn-primary:active:focus,
  289. .btn-primary.active:focus,
  290. .open > .dropdown-toggle.btn-primary:focus,
  291. .btn-primary:active.focus,
  292. .btn-primary.active.focus,
  293. .open > .dropdown-toggle.btn-primary.focus {
  294. color: #fff;
  295. background-color: #204d74;
  296. border-color: #122b40;
  297. }
  298. .btn-primary:active,
  299. .btn-primary.active,
  300. .open > .dropdown-toggle.btn-primary {
  301. background-image: none;
  302. }
  303. .btn-primary.disabled:hover,
  304. .btn-primary[disabled]:hover,
  305. fieldset[disabled] .btn-primary:hover,
  306. .btn-primary.disabled:focus,
  307. .btn-primary[disabled]:focus,
  308. fieldset[disabled] .btn-primary:focus,
  309. .btn-primary.disabled.focus,
  310. .btn-primary[disabled].focus,
  311. fieldset[disabled] .btn-primary.focus {
  312. background-color: #337ab7;
  313. border-color: #2e6da4;
  314. }
  315. .btn-primary .badge {
  316. color: #337ab7;
  317. background-color: #fff;
  318. }
  319. .btn-success {
  320. color: #fff;
  321. background-color: #5cb85c;
  322. border-color: #4cae4c;
  323. }
  324. .btn-success:focus,
  325. .btn-success.focus {
  326. color: #fff;
  327. background-color: #449d44;
  328. border-color: #255625;
  329. }
  330. .btn-success:hover {
  331. color: #fff;
  332. background-color: #449d44;
  333. border-color: #398439;
  334. }
  335. .btn-success:active,
  336. .btn-success.active,
  337. .open > .dropdown-toggle.btn-success {
  338. color: #fff;
  339. background-color: #449d44;
  340. border-color: #398439;
  341. }
  342. .btn-success:active:hover,
  343. .btn-success.active:hover,
  344. .open > .dropdown-toggle.btn-success:hover,
  345. .btn-success:active:focus,
  346. .btn-success.active:focus,
  347. .open > .dropdown-toggle.btn-success:focus,
  348. .btn-success:active.focus,
  349. .btn-success.active.focus,
  350. .open > .dropdown-toggle.btn-success.focus {
  351. color: #fff;
  352. background-color: #398439;
  353. border-color: #255625;
  354. }
  355. .btn-success:active,
  356. .btn-success.active,
  357. .open > .dropdown-toggle.btn-success {
  358. background-image: none;
  359. }
  360. .btn-success.disabled:hover,
  361. .btn-success[disabled]:hover,
  362. fieldset[disabled] .btn-success:hover,
  363. .btn-success.disabled:focus,
  364. .btn-success[disabled]:focus,
  365. fieldset[disabled] .btn-success:focus,
  366. .btn-success.disabled.focus,
  367. .btn-success[disabled].focus,
  368. fieldset[disabled] .btn-success.focus {
  369. background-color: #5cb85c;
  370. border-color: #4cae4c;
  371. }
  372. .btn-success .badge {
  373. color: #5cb85c;
  374. background-color: #fff;
  375. }
  376. .btn-info {
  377. color: #fff;
  378. background-color: #5bc0de;
  379. border-color: #46b8da;
  380. }
  381. .btn-info:focus,
  382. .btn-info.focus {
  383. color: #fff;
  384. background-color: #31b0d5;
  385. border-color: #1b6d85;
  386. }
  387. .btn-info:hover {
  388. color: #fff;
  389. background-color: #31b0d5;
  390. border-color: #269abc;
  391. }
  392. .btn-info:active,
  393. .btn-info.active,
  394. .open > .dropdown-toggle.btn-info {
  395. color: #fff;
  396. background-color: #31b0d5;
  397. border-color: #269abc;
  398. }
  399. .btn-info:active:hover,
  400. .btn-info.active:hover,
  401. .open > .dropdown-toggle.btn-info:hover,
  402. .btn-info:active:focus,
  403. .btn-info.active:focus,
  404. .open > .dropdown-toggle.btn-info:focus,
  405. .btn-info:active.focus,
  406. .btn-info.active.focus,
  407. .open > .dropdown-toggle.btn-info.focus {
  408. color: #fff;
  409. background-color: #269abc;
  410. border-color: #1b6d85;
  411. }
  412. .btn-info:active,
  413. .btn-info.active,
  414. .open > .dropdown-toggle.btn-info {
  415. background-image: none;
  416. }
  417. .btn-info.disabled:hover,
  418. .btn-info[disabled]:hover,
  419. fieldset[disabled] .btn-info:hover,
  420. .btn-info.disabled:focus,
  421. .btn-info[disabled]:focus,
  422. fieldset[disabled] .btn-info:focus,
  423. .btn-info.disabled.focus,
  424. .btn-info[disabled].focus,
  425. fieldset[disabled] .btn-info.focus {
  426. background-color: #5bc0de;
  427. border-color: #46b8da;
  428. }
  429. .btn-info .badge {
  430. color: #5bc0de;
  431. background-color: #fff;
  432. }
  433. .btn-warning {
  434. color: #fff;
  435. background-color: #f0ad4e;
  436. border-color: #eea236;
  437. }
  438. .btn-warning:focus,
  439. .btn-warning.focus {
  440. color: #fff;
  441. background-color: #ec971f;
  442. border-color: #985f0d;
  443. }
  444. .btn-warning:hover {
  445. color: #fff;
  446. background-color: #ec971f;
  447. border-color: #d58512;
  448. }
  449. .btn-warning:active,
  450. .btn-warning.active,
  451. .open > .dropdown-toggle.btn-warning {
  452. color: #fff;
  453. background-color: #ec971f;
  454. border-color: #d58512;
  455. }
  456. .btn-warning:active:hover,
  457. .btn-warning.active:hover,
  458. .open > .dropdown-toggle.btn-warning:hover,
  459. .btn-warning:active:focus,
  460. .btn-warning.active:focus,
  461. .open > .dropdown-toggle.btn-warning:focus,
  462. .btn-warning:active.focus,
  463. .btn-warning.active.focus,
  464. .open > .dropdown-toggle.btn-warning.focus {
  465. color: #fff;
  466. background-color: #d58512;
  467. border-color: #985f0d;
  468. }
  469. .btn-warning:active,
  470. .btn-warning.active,
  471. .open > .dropdown-toggle.btn-warning {
  472. background-image: none;
  473. }
  474. .btn-warning.disabled:hover,
  475. .btn-warning[disabled]:hover,
  476. fieldset[disabled] .btn-warning:hover,
  477. .btn-warning.disabled:focus,
  478. .btn-warning[disabled]:focus,
  479. fieldset[disabled] .btn-warning:focus,
  480. .btn-warning.disabled.focus,
  481. .btn-warning[disabled].focus,
  482. fieldset[disabled] .btn-warning.focus {
  483. background-color: #f0ad4e;
  484. border-color: #eea236;
  485. }
  486. .btn-warning .badge {
  487. color: #f0ad4e;
  488. background-color: #fff;
  489. }
  490. .btn-danger {
  491. color: #fff;
  492. background-color: #d9534f;
  493. border-color: #d43f3a;
  494. }
  495. .btn-danger:focus,
  496. .btn-danger.focus {
  497. color: #fff;
  498. background-color: #c9302c;
  499. border-color: #761c19;
  500. }
  501. .btn-danger:hover {
  502. color: #fff;
  503. background-color: #c9302c;
  504. border-color: #ac2925;
  505. }
  506. .btn-danger:active,
  507. .btn-danger.active,
  508. .open > .dropdown-toggle.btn-danger {
  509. color: #fff;
  510. background-color: #c9302c;
  511. border-color: #ac2925;
  512. }
  513. .btn-danger:active:hover,
  514. .btn-danger.active:hover,
  515. .open > .dropdown-toggle.btn-danger:hover,
  516. .btn-danger:active:focus,
  517. .btn-danger.active:focus,
  518. .open > .dropdown-toggle.btn-danger:focus,
  519. .btn-danger:active.focus,
  520. .btn-danger.active.focus,
  521. .open > .dropdown-toggle.btn-danger.focus {
  522. color: #fff;
  523. background-color: #ac2925;
  524. border-color: #761c19;
  525. }
  526. .btn-danger:active,
  527. .btn-danger.active,
  528. .open > .dropdown-toggle.btn-danger {
  529. background-image: none;
  530. }
  531. .btn-danger.disabled:hover,
  532. .btn-danger[disabled]:hover,
  533. fieldset[disabled] .btn-danger:hover,
  534. .btn-danger.disabled:focus,
  535. .btn-danger[disabled]:focus,
  536. fieldset[disabled] .btn-danger:focus,
  537. .btn-danger.disabled.focus,
  538. .btn-danger[disabled].focus,
  539. fieldset[disabled] .btn-danger.focus {
  540. background-color: #d9534f;
  541. border-color: #d43f3a;
  542. }
  543. .btn-danger .badge {
  544. color: #d9534f;
  545. background-color: #fff;
  546. }
  547. .btn-link {
  548. font-weight: normal;
  549. color: #337ab7;
  550. border-radius: 0;
  551. }
  552. .btn-link,
  553. .btn-link:active,
  554. .btn-link.active,
  555. .btn-link[disabled],
  556. fieldset[disabled] .btn-link {
  557. background-color: transparent;
  558. -webkit-box-shadow: none;
  559. box-shadow: none;
  560. }
  561. .btn-link,
  562. .btn-link:hover,
  563. .btn-link:focus,
  564. .btn-link:active {
  565. border-color: transparent;
  566. }
  567. .btn-link:hover,
  568. .btn-link:focus {
  569. color: #23527c;
  570. text-decoration: underline;
  571. background-color: transparent;
  572. }
  573. .btn-link[disabled]:hover,
  574. fieldset[disabled] .btn-link:hover,
  575. .btn-link[disabled]:focus,
  576. fieldset[disabled] .btn-link:focus {
  577. color: #777;
  578. text-decoration: none;
  579. }
  580. .btn-lg,
  581. .btn-group-lg > .btn {
  582. padding: 10px 16px;
  583. font-size: 18px;
  584. line-height: 1.3333333;
  585. border-radius: 6px;
  586. }
  587. .btn-sm,
  588. .btn-group-sm > .btn {
  589. padding: 5px 10px;
  590. font-size: 12px;
  591. line-height: 1.5;
  592. border-radius: 3px;
  593. }
  594. .btn-xs,
  595. .btn-group-xs > .btn {
  596. padding: 1px 5px;
  597. font-size: 12px;
  598. line-height: 1.5;
  599. border-radius: 3px;
  600. }
  601. .btn-block {
  602. display: block;
  603. width: 100%;
  604. }
  605. .btn-block + .btn-block {
  606. margin-top: 5px;
  607.  
  608.  
  609. js:
  610.  
  611. var versuche = 3; // Variable to count number of attempts.
  612. // Below function Executes on click of login button.
  613. function validate(){
  614. var username = document.getElementById("username").value;
  615. var password = document.getElementById("password").value;
  616. if ( username == "Lucas" && password == "10IF"){
  617. //alert ("Erfolgreich eingeloggt");
  618. window.location = "KlassenDaten.html"; // Redirecting to other page.
  619. return false;
  620. }
  621. else{
  622. versuche --;// Decrementing by one.
  623. alert("Flasches PW! Du hast noch "+versuche+" Versuche");
  624. // Disabling fields after 3 attempts.
  625. if( versuche == 0){
  626. document.getElementById("username").disabled = true;
  627. document.getElementById("password").disabled = true;
  628. document.getElementById("submit").disabled = true;
  629. return false;
  630. }
  631. }
  632. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement