msenturk · September 10, 2025 13:16
diff --git a/demo-simple-login.html b/demo-simple-login.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Practice Test Login</title>
  <style>
    body {
      background-color: #f9f9f9;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: "Open Sans", Arial, sans-serif;
      color: #4a4a4a;
    }

    .wrapper {
      background-color: #fff;
      padding: 40px 50px;
      border: 1px solid #dcdcdc;
      border-radius: 4px;
      width: 350px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      text-align: left;
    }

    .wrapper h1 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .wrapper p.description {
      font-size: 14px;
      margin-bottom: 25px;
    }

    label {
      font-size: 13px;
      margin-bottom: 5px;
      display: block;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      box-sizing: border-box;
      border: 1px solid #d1d1d1;
      border-radius: 2px;
      font-size: 14px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #000;
      color: #fff;
      border: none;
      border-radius: 2px;
      font-size: 16px;
      cursor: pointer;
    }

    button:hover {
      background-color: #333;
    }

    .message {
      margin-top: 15px;
      font-size: 14px;
      display: none;
    }

    .error {
      color: #d63638;
    }

    .success {
      color: #026936;
    }
  </style>
 </head>
 <body>
  <div class="wrapper">
    <h1>Test Login</h1>
    <p class="description">This page is a demo of a simple login form for testing purposes.</p>
    <form id="loginForm">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" required />

      <label for="password">Password</label>
      <input type="password" id="password" name="password" required />

      <button type="submit">Submit</button>
      <div class="message" id="loginMessage"></div>
    </form>
  </div>

  <script>
    const form = document.getElementById('loginForm');
    const messageBox = document.getElementById('loginMessage');

    form.addEventListener('submit', function (e) {
      e.preventDefault();

      const user = form.username.value.trim();
      const pass = form.password.value.trim();

      if (user === "student" && pass === "Password123") {
        messageBox.textContent = "Congratulations! You logged in successfully.";
        messageBox.className = "message success";
        messageBox.style.display = "block";
      } else if (user !== "student") {
        messageBox.textContent = "Your username is invalid!";
        messageBox.className = "message error";
        messageBox.style.display = "block";
      } else {
        messageBox.textContent = "Your password is invalid!";
        messageBox.className = "message error";
        messageBox.style.display = "block";
      }
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Practice Test Login</title>
	<style>
	body {
	background-color: #f9f9f9;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	font-family: "Open Sans", Arial, sans-serif;
	color: #4a4a4a;
	}

	.wrapper {
	background-color: #fff;
	padding: 40px 50px;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	width: 350px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	text-align: left;
	}

	.wrapper h1 {
	font-size: 24px;
	margin-bottom: 10px;
	}

	.wrapper p.description {
	font-size: 14px;
	margin-bottom: 25px;
	}

	label {
	font-size: 13px;
	margin-bottom: 5px;
	display: block;
	}

	input[type="text"],
	input[type="password"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	box-sizing: border-box;
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	font-size: 14px;
	}

	button {
	width: 100%;
	padding: 10px;
	background-color: #000;
	color: #fff;
	border: none;
	border-radius: 2px;
	font-size: 16px;
	cursor: pointer;
	}

	button:hover {
	background-color: #333;
	}

	.message {
	margin-top: 15px;
	font-size: 14px;
	display: none;
	}

	.error {
	color: #d63638;
	}

	.success {
	color: #026936;
	}
	</style>
	</head>
	<body>
	<div class="wrapper">
	<h1>Test Login</h1>
	<p class="description">This page is a demo of a simple login form for testing purposes.</p>
	<form id="loginForm">
	<label for="username">Username</label>
	<input type="text" id="username" name="username" required />

	<label for="password">Password</label>
	<input type="password" id="password" name="password" required />

	<button type="submit">Submit</button>
	<div class="message" id="loginMessage"></div>
	</form>
	</div>

	<script>
	const form = document.getElementById('loginForm');
	const messageBox = document.getElementById('loginMessage');

	form.addEventListener('submit', function (e) {
	e.preventDefault();

	const user = form.username.value.trim();
	const pass = form.password.value.trim();

	if (user === "student" && pass === "Password123") {
	messageBox.textContent = "Congratulations! You logged in successfully.";
	messageBox.className = "message success";
	messageBox.style.display = "block";
	} else if (user !== "student") {
	messageBox.textContent = "Your username is invalid!";
	messageBox.className = "message error";
	messageBox.style.display = "block";
	} else {
	messageBox.textContent = "Your password is invalid!";
	messageBox.className = "message error";
	messageBox.style.display = "block";
	}
	});
	</script>
	</body>
	</html>