Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html:
- <html>
- <STYLE>
- A {text-decoration: none;}
- A:Hover {text-decoration: underline;}
- C:Hover {
- text-shadow: 2px 2px 10px #70D97F;}
- </STYLE>
- <head>
- <title>Klassen Login</title>
- <!-- Include CSS File Here -->
- <link rel="stylesheet" href="css/style.css"/>
- <!-- Include JS File Here -->
- <script src="js/login.js"></script>
- </head>
- <body background="img/bg.jpg">
- <div class="container">
- <div class="main">
- <h2>Klassen Login</h2>
- <form id="form_id" method="post" name="myform">
- <label>Benutzername :</label>
- <input type="text" name="username" id="username"/>
- <label>Passwort :</label>
- <input type="password" name="password" id="password"/>
- <input type="button" value="Login" id="submit" onclick="validate()"/>
- </form>
- <span><b class="note">Notiz : </b> Bitte Benutze Folgende Daten <br/><b class="valid">Benutzername : Lucas<br/>Passwort : 10IF</b></span><br>
- <center>
- <a href="index.html" class="btn btn-default btn-lg">Zurück</a>
- </center>
- </div>
- </div>
- </body>
- </html>
- css:
- /* Below line is used for online Google font */
- @import url(https://fonts.googleapis.com/css?family=Raleway);
- a {
- color: #FA862E;
- }
- h2{
- padding: 35px 30px;
- margin: -10px -50px;
- text-align:center;
- border-radius: 50px 50px 0 0;
- }
- hr{
- margin: 10px -50px;
- border: 0;
- border-top: 1px solid #ccc;
- margin-bottom: 40px;
- }
- div.container{
- width: 430px;
- height: 610px;
- margin:35px auto;
- font-family: 'Raleway', sans-serif;
- }
- div.main{
- width: 300px;
- padding: 10px 50px 25px;
- border: 2px solid gray;
- border-radius: 50px;
- font-family: raleway;
- float:left;
- margin-top:50px;
- }
- input[type=text],input[type=password]{
- width: 100%;
- height: 40px;
- padding: 5px;
- margin-bottom: 25px;
- margin-top: 5px;
- border: 2px solid #ccc;
- color: #4f4f4f;
- font-size: 16px;
- border-radius: 5px;
- }
- label{
- color: #464646;
- text-shadow: 0 1px 0 #fff;
- font-size: 14px;
- font-weight: bold;
- }
- center{
- font-size:32px;
- }
- .note{
- color:red;
- }
- .valid{
- color:green;
- }
- .back{
- text-decoration: none;
- border: 8px solid rgb(0, 143, 255);
- background-color: rgb(0, 214, 255);
- padding: 3px 20px;
- border-radius: 2px;
- color: black;
- }
- input[type=button]{
- font-size: 16px;
- background: linear-gradient(#c3e580 5%, #c3e580 100%);
- border: 1px solid #c3e580;
- color: #4E4D4B;
- font-weight: bold;
- cursor: pointer;
- width: 100%;
- border-radius: 5px;
- padding: 10px 0;
- outline:none;
- }
- input[type=button]:hover{
- background: linear-gradient(#a2c659 5%, #a2c659 100%);
- border: 1px solid #a2c659;
- }
- #bck
- {
- height:;
- width:;
- top:440;
- left:560px;
- border:0px solid #000000;
- background-color:transparent;
- text-align:center;
- cursor: pointer;
- }
- .btn {
- display: inline-block;
- padding: 6px 12px;
- margin-bottom: 0;
- font-size: 14px;
- font-weight: normal;
- line-height: 1.42857143;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- background-image: none;
- border: 1px solid transparent;
- border-radius: 4px;
- }
- .btn:focus,
- .btn:active:focus,
- .btn.active:focus,
- .btn.focus,
- .btn:active.focus,
- .btn.active.focus {
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
- }
- .btn:hover,
- .btn:focus,
- .btn.focus {
- color: #333;
- text-decoration: none;
- }
- .btn:active,
- .btn.active {
- background-image: none;
- outline: 0;
- -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
- }
- .btn.disabled,
- .btn[disabled],
- fieldset[disabled] .btn {
- cursor: not-allowed;
- filter: alpha(opacity=65);
- -webkit-box-shadow: none;
- box-shadow: none;
- opacity: .65;
- }
- a.btn.disabled,
- fieldset[disabled] a.btn {
- pointer-events: none;
- }
- .btn-default {
- color: #333;
- background-color: #fff;
- border-color: #ccc;
- }
- .btn-default:focus,
- .btn-default.focus {
- color: #333;
- background-color: #e6e6e6;
- border-color: #8c8c8c;
- }
- .btn-default:hover {
- color: #333;
- background-color: #e6e6e6;
- border-color: #adadad;
- }
- .btn-default:active,
- .btn-default.active,
- .open > .dropdown-toggle.btn-default {
- color: #333;
- background-color: #e6e6e6;
- border-color: #adadad;
- }
- .btn-default:active:hover,
- .btn-default.active:hover,
- .open > .dropdown-toggle.btn-default:hover,
- .btn-default:active:focus,
- .btn-default.active:focus,
- .open > .dropdown-toggle.btn-default:focus,
- .btn-default:active.focus,
- .btn-default.active.focus,
- .open > .dropdown-toggle.btn-default.focus {
- color: #333;
- background-color: #d4d4d4;
- border-color: #8c8c8c;
- }
- .btn-default:active,
- .btn-default.active,
- .open > .dropdown-toggle.btn-default {
- background-image: none;
- }
- .btn-default.disabled:hover,
- .btn-default[disabled]:hover,
- fieldset[disabled] .btn-default:hover,
- .btn-default.disabled:focus,
- .btn-default[disabled]:focus,
- fieldset[disabled] .btn-default:focus,
- .btn-default.disabled.focus,
- .btn-default[disabled].focus,
- fieldset[disabled] .btn-default.focus {
- background-color: #fff;
- border-color: #ccc;
- }
- .btn-default .badge {
- color: #fff;
- background-color: #333;
- }
- .btn-primary {
- color: #fff;
- background-color: #337ab7;
- border-color: #2e6da4;
- }
- .btn-primary:focus,
- .btn-primary.focus {
- color: #fff;
- background-color: #286090;
- border-color: #122b40;
- }
- .btn-primary:hover {
- color: #fff;
- background-color: #286090;
- border-color: #204d74;
- }
- .btn-primary:active,
- .btn-primary.active,
- .open > .dropdown-toggle.btn-primary {
- color: #fff;
- background-color: #286090;
- border-color: #204d74;
- }
- .btn-primary:active:hover,
- .btn-primary.active:hover,
- .open > .dropdown-toggle.btn-primary:hover,
- .btn-primary:active:focus,
- .btn-primary.active:focus,
- .open > .dropdown-toggle.btn-primary:focus,
- .btn-primary:active.focus,
- .btn-primary.active.focus,
- .open > .dropdown-toggle.btn-primary.focus {
- color: #fff;
- background-color: #204d74;
- border-color: #122b40;
- }
- .btn-primary:active,
- .btn-primary.active,
- .open > .dropdown-toggle.btn-primary {
- background-image: none;
- }
- .btn-primary.disabled:hover,
- .btn-primary[disabled]:hover,
- fieldset[disabled] .btn-primary:hover,
- .btn-primary.disabled:focus,
- .btn-primary[disabled]:focus,
- fieldset[disabled] .btn-primary:focus,
- .btn-primary.disabled.focus,
- .btn-primary[disabled].focus,
- fieldset[disabled] .btn-primary.focus {
- background-color: #337ab7;
- border-color: #2e6da4;
- }
- .btn-primary .badge {
- color: #337ab7;
- background-color: #fff;
- }
- .btn-success {
- color: #fff;
- background-color: #5cb85c;
- border-color: #4cae4c;
- }
- .btn-success:focus,
- .btn-success.focus {
- color: #fff;
- background-color: #449d44;
- border-color: #255625;
- }
- .btn-success:hover {
- color: #fff;
- background-color: #449d44;
- border-color: #398439;
- }
- .btn-success:active,
- .btn-success.active,
- .open > .dropdown-toggle.btn-success {
- color: #fff;
- background-color: #449d44;
- border-color: #398439;
- }
- .btn-success:active:hover,
- .btn-success.active:hover,
- .open > .dropdown-toggle.btn-success:hover,
- .btn-success:active:focus,
- .btn-success.active:focus,
- .open > .dropdown-toggle.btn-success:focus,
- .btn-success:active.focus,
- .btn-success.active.focus,
- .open > .dropdown-toggle.btn-success.focus {
- color: #fff;
- background-color: #398439;
- border-color: #255625;
- }
- .btn-success:active,
- .btn-success.active,
- .open > .dropdown-toggle.btn-success {
- background-image: none;
- }
- .btn-success.disabled:hover,
- .btn-success[disabled]:hover,
- fieldset[disabled] .btn-success:hover,
- .btn-success.disabled:focus,
- .btn-success[disabled]:focus,
- fieldset[disabled] .btn-success:focus,
- .btn-success.disabled.focus,
- .btn-success[disabled].focus,
- fieldset[disabled] .btn-success.focus {
- background-color: #5cb85c;
- border-color: #4cae4c;
- }
- .btn-success .badge {
- color: #5cb85c;
- background-color: #fff;
- }
- .btn-info {
- color: #fff;
- background-color: #5bc0de;
- border-color: #46b8da;
- }
- .btn-info:focus,
- .btn-info.focus {
- color: #fff;
- background-color: #31b0d5;
- border-color: #1b6d85;
- }
- .btn-info:hover {
- color: #fff;
- background-color: #31b0d5;
- border-color: #269abc;
- }
- .btn-info:active,
- .btn-info.active,
- .open > .dropdown-toggle.btn-info {
- color: #fff;
- background-color: #31b0d5;
- border-color: #269abc;
- }
- .btn-info:active:hover,
- .btn-info.active:hover,
- .open > .dropdown-toggle.btn-info:hover,
- .btn-info:active:focus,
- .btn-info.active:focus,
- .open > .dropdown-toggle.btn-info:focus,
- .btn-info:active.focus,
- .btn-info.active.focus,
- .open > .dropdown-toggle.btn-info.focus {
- color: #fff;
- background-color: #269abc;
- border-color: #1b6d85;
- }
- .btn-info:active,
- .btn-info.active,
- .open > .dropdown-toggle.btn-info {
- background-image: none;
- }
- .btn-info.disabled:hover,
- .btn-info[disabled]:hover,
- fieldset[disabled] .btn-info:hover,
- .btn-info.disabled:focus,
- .btn-info[disabled]:focus,
- fieldset[disabled] .btn-info:focus,
- .btn-info.disabled.focus,
- .btn-info[disabled].focus,
- fieldset[disabled] .btn-info.focus {
- background-color: #5bc0de;
- border-color: #46b8da;
- }
- .btn-info .badge {
- color: #5bc0de;
- background-color: #fff;
- }
- .btn-warning {
- color: #fff;
- background-color: #f0ad4e;
- border-color: #eea236;
- }
- .btn-warning:focus,
- .btn-warning.focus {
- color: #fff;
- background-color: #ec971f;
- border-color: #985f0d;
- }
- .btn-warning:hover {
- color: #fff;
- background-color: #ec971f;
- border-color: #d58512;
- }
- .btn-warning:active,
- .btn-warning.active,
- .open > .dropdown-toggle.btn-warning {
- color: #fff;
- background-color: #ec971f;
- border-color: #d58512;
- }
- .btn-warning:active:hover,
- .btn-warning.active:hover,
- .open > .dropdown-toggle.btn-warning:hover,
- .btn-warning:active:focus,
- .btn-warning.active:focus,
- .open > .dropdown-toggle.btn-warning:focus,
- .btn-warning:active.focus,
- .btn-warning.active.focus,
- .open > .dropdown-toggle.btn-warning.focus {
- color: #fff;
- background-color: #d58512;
- border-color: #985f0d;
- }
- .btn-warning:active,
- .btn-warning.active,
- .open > .dropdown-toggle.btn-warning {
- background-image: none;
- }
- .btn-warning.disabled:hover,
- .btn-warning[disabled]:hover,
- fieldset[disabled] .btn-warning:hover,
- .btn-warning.disabled:focus,
- .btn-warning[disabled]:focus,
- fieldset[disabled] .btn-warning:focus,
- .btn-warning.disabled.focus,
- .btn-warning[disabled].focus,
- fieldset[disabled] .btn-warning.focus {
- background-color: #f0ad4e;
- border-color: #eea236;
- }
- .btn-warning .badge {
- color: #f0ad4e;
- background-color: #fff;
- }
- .btn-danger {
- color: #fff;
- background-color: #d9534f;
- border-color: #d43f3a;
- }
- .btn-danger:focus,
- .btn-danger.focus {
- color: #fff;
- background-color: #c9302c;
- border-color: #761c19;
- }
- .btn-danger:hover {
- color: #fff;
- background-color: #c9302c;
- border-color: #ac2925;
- }
- .btn-danger:active,
- .btn-danger.active,
- .open > .dropdown-toggle.btn-danger {
- color: #fff;
- background-color: #c9302c;
- border-color: #ac2925;
- }
- .btn-danger:active:hover,
- .btn-danger.active:hover,
- .open > .dropdown-toggle.btn-danger:hover,
- .btn-danger:active:focus,
- .btn-danger.active:focus,
- .open > .dropdown-toggle.btn-danger:focus,
- .btn-danger:active.focus,
- .btn-danger.active.focus,
- .open > .dropdown-toggle.btn-danger.focus {
- color: #fff;
- background-color: #ac2925;
- border-color: #761c19;
- }
- .btn-danger:active,
- .btn-danger.active,
- .open > .dropdown-toggle.btn-danger {
- background-image: none;
- }
- .btn-danger.disabled:hover,
- .btn-danger[disabled]:hover,
- fieldset[disabled] .btn-danger:hover,
- .btn-danger.disabled:focus,
- .btn-danger[disabled]:focus,
- fieldset[disabled] .btn-danger:focus,
- .btn-danger.disabled.focus,
- .btn-danger[disabled].focus,
- fieldset[disabled] .btn-danger.focus {
- background-color: #d9534f;
- border-color: #d43f3a;
- }
- .btn-danger .badge {
- color: #d9534f;
- background-color: #fff;
- }
- .btn-link {
- font-weight: normal;
- color: #337ab7;
- border-radius: 0;
- }
- .btn-link,
- .btn-link:active,
- .btn-link.active,
- .btn-link[disabled],
- fieldset[disabled] .btn-link {
- background-color: transparent;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
- .btn-link,
- .btn-link:hover,
- .btn-link:focus,
- .btn-link:active {
- border-color: transparent;
- }
- .btn-link:hover,
- .btn-link:focus {
- color: #23527c;
- text-decoration: underline;
- background-color: transparent;
- }
- .btn-link[disabled]:hover,
- fieldset[disabled] .btn-link:hover,
- .btn-link[disabled]:focus,
- fieldset[disabled] .btn-link:focus {
- color: #777;
- text-decoration: none;
- }
- .btn-lg,
- .btn-group-lg > .btn {
- padding: 10px 16px;
- font-size: 18px;
- line-height: 1.3333333;
- border-radius: 6px;
- }
- .btn-sm,
- .btn-group-sm > .btn {
- padding: 5px 10px;
- font-size: 12px;
- line-height: 1.5;
- border-radius: 3px;
- }
- .btn-xs,
- .btn-group-xs > .btn {
- padding: 1px 5px;
- font-size: 12px;
- line-height: 1.5;
- border-radius: 3px;
- }
- .btn-block {
- display: block;
- width: 100%;
- }
- .btn-block + .btn-block {
- margin-top: 5px;
- js:
- var versuche = 3; // Variable to count number of attempts.
- // Below function Executes on click of login button.
- function validate(){
- var username = document.getElementById("username").value;
- var password = document.getElementById("password").value;
- if ( username == "Lucas" && password == "10IF"){
- //alert ("Erfolgreich eingeloggt");
- window.location = "KlassenDaten.html"; // Redirecting to other page.
- return false;
- }
- else{
- versuche --;// Decrementing by one.
- alert("Flasches PW! Du hast noch "+versuche+" Versuche");
- // Disabling fields after 3 attempts.
- if( versuche == 0){
- document.getElementById("username").disabled = true;
- document.getElementById("password").disabled = true;
- document.getElementById("submit").disabled = true;
- return false;
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement